@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Comfortaa:wght@300..700&family=montserrat:ital,wght@0,300..900;1,300..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Figtree:ital,wght@0,300..900;1,300..900&family=Kalam:wght@300;400;700&family=Michroma&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+IN:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Tangerine:wght@400;700&display=swap');

   body,
   html {
     margin: 0;
     padding: 0;
    background: linear-gradient(45deg,rgb(231, 234, 255),white);
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p {
     margin: 0;
   }

   .search-bar {
     position: relative;
     margin: 10px;
   }

   a {
     text-decoration: none;
   }

   .search-bar input {
     padding: 8px 35px 8px 12px;
     border-radius: 20px;
     border: none;
     outline: none;
     font-size: 14px;
   }

   .search-bar i {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: #555;
   }

/* navbar */
.navbar {
    width: 100%;
    height: 5vw;
    position: fixed;
    z-index: 10;
    background-color: #ffffff5a;
    backdrop-filter: blur(5px);
}

@media screen and (max-width:1600px) {
    .navbar{
        height: 7vw;
    }
}

.nav-cont {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}

.nav-cont ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    font-size: 15px;
    font-family: "figtree";
    font-weight: 600;
}

.nav-cont ul li {
    position: relative;
    cursor: pointer;
}
.nav-cont ul li a{
  color: rgb(0, 0, 0);
}
.fintech_logo {
    width: 190px;
}

.nav-cont ul .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    min-width: 160px;
    z-index: 1000;
}

.dropdown-menu li {
    padding: 8px 12px;
    white-space: nowrap;
}

.dropdown-menu li:hover {
    background: #f5f5f5;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

.mob-frs-logo{
    display: none;
}

   /* header */
   #header {
     position: relative;
     height: 55vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     background-size: cover;
  background: linear-gradient(45deg, #8711c1, #2472fc);
     gap: 1vw;
   }

   .fintech_icon{
    position: absolute;
    width: 20vw;
    opacity: 0.1;
    left: 1vw;
    bottom: 0;
   }
   .b {
     font-size: 1vw;
     font-family: 'poppins';
     color: #ffffff;
     border-bottom: 1px solid rgb(255, 255, 255);
   }

   h1 {
     font-family: 'montserrat';
     font-size: 2.5vw;
     z-index: 1;
     color: #fff;
     margin: 0;
   }

   .social-icons {
     display: flex;
     gap: 15px;
     font-size: 18px;
   }

   .social-icons a {
     color: #fff;
     transition: color 0.3s;
   }

   .social-icons a:hover {
     color: #00b4d8;
   }

   /* blog boxes */
   #blogs {
     width: 80%;
     display: flex;
     margin: 7vw auto;
   }

   .blog-container {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     margin: 0 auto;
     gap: 2vw;
     padding: 2vw 0;
   }

   .blog-box {
     position: relative;
     width: 22vw;
     height: 28vw;
     display: flex;
     flex-direction: column;
     align-items: start;
     justify-content: start;
     border-radius: .5vw;
     gap: 1vw;
     padding-bottom: 1vw;
     font-family: 'poppins';
     background-color: #fff;
     border: 2px solid #cdcdcd;
     transition: all ease .4s;
   }

   .blog-box:hover {
background: linear-gradient(45deg,#8711c1,#2472fc);
   }

   .blog-box:hover .blog-name {
     color: #fff;
   }

   .blog-box:hover .blog-date {
     color: #fff;
   }

   .blog-type {
     position: absolute;
     top: 2vw;
     padding: 2px 1vw 2px 1vw;
     border-top-right-radius: 1vw;
     border-bottom-right-radius: 1vw;
     z-index: 1;
     color: #00021e;
     background-color: #cdcdcd;
   }

   .blog-img {
     width: 100%;
     height: 14vw;
     display: flex;
     align-items: start;
     justify-content: start;
     border-radius: 0.5vw;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     transition: all ease .4s;
     overflow: hidden;
   }

   .blog-img:after {
     content: '';
     width: .5vw;
     height: 2vw;
   }

   .blog-img img {
     width: 100%;
     transition: all ease .4s;
   }

   .blog-name {
     font-size: 1.2vw;
     line-height: 1.5vw;
     font-weight: 500;
     height: 6vw;
     color: #414141;
     width: 80%;
     margin: 0;
     margin-left: 1vw;
     padding: 0;
     font-weight: 700;
   }

   .blog-date {
     font-size: .9vw;
     margin-left: 1vw;
     color: #00021e;
   }

   .blog-btn {
     min-width: 8vw;
     height: 2vw;
     padding: 0 1vw;
     border-radius: 1vw;
     font-family: 'montserrat';
     border: 1px solid #cdcdcd;
     margin-left: 1vw;
     cursor: pointer;
     transition: all ease .4s;
   }

   .blog-box:hover .blog-img img {
     scale: 1.05;
   }

   /* categories */
   #categories {
     width: auto;
     height: 32vw;
      background: linear-gradient(45deg, #8711c1, #2472fc);
     border-radius: 1vw;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1vw;
     justify-content: start;
   }

   .categories-wrapper {
     flex: 1;
     position: relative;
   }

   .categories-container {
     display: flex;
     width: 100%;
     height: 30vw;
     flex-direction: column;
     gap: 1vw;
     overflow-y: scroll;
   }

   .categories-container::-webkit-scrollbar {
     width: 0;
   }

   .category-box {
     position: relative;
     width: 26vw;
     height: 7vw;
     display: flex;
     align-items: center;
     justify-content: space-between;
     /* border-radius: .5vw; */
     padding: 0.5vw;
     color: #fff;
     /* background-color: #eee; */
     border-bottom: 2px solid #fff;
   }

   /* .category-box::before {
    content: '';
    position: absolute;
    width: 2vw;
    height: 2vw;
    border-top: 1px solid #020856;
    border-left: 1px solid #020856;
    left: 0;
    top: 0;
    border-top-left-radius: .5vw;
   } */

   .category-img {
     width: 7vw;
     height: 7vw;
     border-radius: .5vw;
     overflow: hidden;
   }

   .category-img img {
     width: 150%;
   }

   .cat-details {
     width: 70%;
     color: #fff;
     display: flex;
     flex-direction: column;
     gap: .5vw;
     font-size: 1vw;
   }

   .category-name {
     font-size: 1.25vw;
     line-height: 1.5vw;
   }

   .category-link {
     font-family: 'montserrat', sans-serif;
     color: #fff;
     text-decoration: none;
   }


   /* blog page */
   #blog-page {
     width: 100%;
     margin: 0vw 0 0;
     min-width: 100vw;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
   }

   #head {
     width: 100%;
     display: flex;
     height: auto;
     align-items: center;
     justify-content: center;
padding-top: 4vw;
   }

   .line {
     width: 100%;
     height: 1px;
     background-color: #000000;
   }

   .blog-top {
     width: 80%;
     height: 12vw;
     display: flex;
     align-items: start;
     justify-content: end;
     flex-direction: column;
     gap: 2vw;
   }

   .blog-top p {
     padding: 0vw 1vw;
     background-color: #1f2629;
     color: #000000;
     border-radius: 1vw;
     font-size: 1vw;
     margin: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }

   .blog-image {
     width: 100%;
     height: 32vw;
     display: flex;
     align-items: start;
     justify-content: center;
     border-radius: 0;
     overflow: hidden;
     border-radius: 1vw;
    border-top-left-radius: 0;
   }

   .blog-image img {
     width: 100%;
   }

   .blog-page-container {
     width: 80%;
     display: flex;
     align-items: start;
     justify-content: center;
     gap: 2vw;
     /* margin: 4vw 0 0 0; */
   }

   .blog-cont {
     width: 70%;
     display: flex;
     flex-direction: column;
     color: #00021e;
     padding-bottom: 4vw;
     gap: 2vw;
     flex: 2;
   }

   .pin-spacer {
     display: flex !important;
     align-items: end;
     justify-content: end;
     max-width: 28vw;
   }

   #blog-page h1 {
     font-size: 2vw;
    color: #393939;
     text-transform: uppercase;
     margin: 0;
   }

   #blog-page h2 {
     font-size: 1.8vw;
     font-family: 'montserrat';
    color: #393939;
   }

   #blog-page h3 {
     font-size: 1.2vw;
     font-family: 'montserrat';
    color: #393939;
   }

   #blog-page ul {
     display: flex;
     font-size: 1.2vw;
     font-family: "montserrat";
     color: #393939;
     flex-direction: column;
     gap: 1vw;
   }

   #blog-page p {
     color: #393939;
     font-family: 'montserrat';
     font-size: 1.2vw;
     line-height: 2vw;
     text-align: justify;
   }

   /* footer */
a {
    text-decoration: none;
}

#footer {
    width: 100%;
    height: auto;
     background: linear-gradient(45deg, #8711c1, #2472fc);
    display: flex;
    align-items: center;
    border-top: 0.2vw solid #c7c7c7;
}

.footerContainer {
    display: flex;
    justify-content: space-between;
    width: 99vw;
    align-items: center;
}

.fLeft {
    width: 60vw;
    height: 8vw;
    display: flex;
    flex-direction: row;
    margin: 0 0 0 1vw;
    gap: 0.8vw;
}

.fMails {
    width: 12vw;
    height: 1.8vw;
    display: flex;
    border: 1.5px solid white;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

.fUp {
    display: flex;
    gap: .7vw;
}

.fRight {
    width: 45vw;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}

.s-f {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
    position: relative;
}

.s-f::after {
    content: "";
    width: 2px;
    height: 4vw;
    position: absolute;
    background-color: #8711c1;
    right: -1.7vw;
}

.org {
    width: 17vw;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
}

.foot-logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    height: 5vw;
    border: 1px solid rgba(255, 255, 255, 0.379);
    width: 7vw;
}

.foot-logo-box img {
    width: 4vw;
}

.foot-logo-box:nth-child(2) .fl-des {
    margin-top: -0.5vw;
}

.foot-logo-box:nth-child(2) img {
    transform: translateY(0.3vw);
}

.fl-des {
    color: rgb(255, 255, 255);
    font-family: "Source Sans 3";
    font-weight: 400;
    font-size: 0.8vw;
}

.fUp div {
    width: 2vw;
    height: 2vw;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px white solid;
    transition: all ease .4s;
}

.fUp div svg {
    width: 1.2vw;
    fill: rgb(255, 255, 255);
}

.fUp div:hover {
    transform: translateY(-3px);
    background-color: #000000;
    border: 1.5px #000000 solid;


}

.fUp div:hover svg {
    fill: rgb(255, 255, 255);
}

.fUp div:hover .fLinks {
    color: #fff;
}

.fLinks {
    font-size: 1.25vw;
    padding-top: 0.1vw;
    color: #fff;
}

.fCopy {
    color: white;
    font-family: 'Montserrat';
    font-size: 0.8vw;
    font-weight: 400;
}

.fCopy span a {
    font-weight: 600;
    color: white;
    text-decoration: none;
}

.foot-l {
    width: 70%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 1.5vw 0vw;
}

.mail-heading {
    color: white;
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 0.9vw;
}

.mail-box {
    width: 26%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}


.mail {
    font-family: 'Montserrat';
    color: white;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9vw;
    transition: all 0.3s ease;
}

.mb-cont {
    cursor: pointer;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0.8vw 0vw;
    padding-left: 1vw;
}

.mb-cont::before {
    content: "";
    width: 0.1vw;
    z-index: -1;
    height: 3.8vw;
    display: block;
    background: linear-gradient(#fc24e3, #fc24e3);
    position: absolute;
    margin-left: -1vw;
    transition: all 0.5s ease;
}

.mail-box:hover .mb-cont::before {
    width: 100%;
}



   @media screen and (max-width:767px) {
    body,html{
      margin: 0;
      padding: 0;
    }
     .navbar{
        height: 100vh;
        left: -100vw;
        transition: all 0.4s ease;
    }
    .nav-cont{
        flex-direction: column;
        justify-content: center;
        gap: 5vw;
    }
    .nav-cont ul{
        flex-direction: column;
        padding: 0;
        margin: 0;
    }
    .fintech_logo{
        display: none;
    }
     .container,
    .menu-icon,
    .frame {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20vw;
        height: 20vw;
        position: fixed;
        z-index: 10000;
        right: 0;
        top: 0;
    }

    .frame {

        width: 20vw;
        height: 20vw;
    }

    .nav-logo-box {
        display: none;
    }

    .menu-icon {
        width: 9vw;
        height: 11vw;
        position: relative;
        cursor: pointer;
    }

    .line-1 {
        background: #000000;
        width: 100%;
        height: 1vw;
        border-radius: 5px;
        position: absolute;
     
    }

    .line-2 {
        background: #000000;
        width: 100%;
        height: 1vw;
        border-radius: 5px;
        position: absolute;
    }

    .line-3 {
        background: #000000;
        width: 100%;
        height: 1vw;
        border-radius: 5px;
        position: absolute;
    }

    .line-1 {
        transition: 500ms;
        transform: translateY(-3vw);
        animation: animateReverse 600ms ease-in-out;
    }

    .line-2 {
        transition: 500ms;
        transform: scale(1);
        opacity: 1;
    }

    .line-3 {
        transition: 500ms;
        transform: translateY(3vw);
        animation: animate2Reverse 600ms ease-in-out;
    }

    .menu-icon.active {
        animation: rotateIcon 600ms ease-in-out forwards;
    }

    .line-1.active {
        animation: animate 600ms ease-in-out forwards;
    }

    .line-2.active {
        transform: scale(0);
        opacity: 0;
    }

    .line-3.active {
        animation: animate2 600ms linear forwards;
    }

    @keyframes animate {
        50% {
            transform: translateY(0px) rotate(0deg);
        }

        100% {
            transform: translateY(0px) rotate(-45deg);
        }
    }

    @keyframes animateReverse {
        0% {
            transform: translateY(0px) rotate(45deg);
        }

        50% {
            transform: translateY(0px) rotate(0deg);
        }

        100% {
            transform: translateY(-3vw) rotate(0deg);
        }
    }

    @keyframes animate2 {
        50% {
            transform: translateY(0px) rotate(0deg);
        }

        100% {
            transform: translateY(0px) rotate(45deg);
        }
    }

    @keyframes animate2Reverse {
        0% {
            transform: translateY(0px) rotate(-45deg);
        }

        50% {
            transform: translateY(0px) rotate(0deg);
        }

        100% {
            transform: translateY(3vw) rotate(0deg);
        }
    }

    @keyframes rotateIcon {
        100% {
            transform: rotate(90deg);
        }
    }
    .navactive{
        left: 0;
    }
    .mob-frs-logo{
        position: fixed;
        width: 35vw;
        top: 4vw;
        left: 4vw;
        z-index: 30;
        display: block;
    }


#header h1 {
    font-family: 'montserrat';
    font-size: 5vw;
    text-align: center;
}
     .nav-links li {
       font-size: 5vw;
        padding: 1vw 2vw;
     }

     .social-icons {
       font-size: 20px;
       gap: 30px;
     }

     .blog-page-container {
       width: 90%;
       flex-direction: column;
     }

     .blog-cont {
       width: 100%;
       gap: 5vw;
     }

     #blog-page p {
       font-size: 1.5rem;
       line-height: 2rem;
     }

     #blog-page {
       width: 100%;
       margin: 20vw 0 0;
     }

     #head {
       width: 100%;
       display: flex;
       height: 80vw;
     }

.b {
    font-size: 3vw;
}
     .blog-top {
       width: 90%;
     }

     .blog-top p {
       font-size: 1.5rem;
     }

     .blog-top {
       width: 90%;
       min-height: 50vw;
       height: auto;
     }

     #blog-page .blog-top p {
       border-radius: 2vw;
       font-size: 1.25rem;
       margin: 0;
       padding: 4vw;
       color: #fff;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }

     .event-drop {
       width: auto;
       top: 7.5vw;
       gap: 3.5vw;
     }

     .blog-image {
       width: 100%;
       height: auto;
       align-items: start;
     }

     .para {
       color: #ddd;
       font-family: 'figtree';
       font-size: 1.5rem;
       line-height: 2.25rem;
     }

     #blog-page h1 {
       font-size: 2.25rem;
     }

     #blog-page h2 {
       font-size: 2.25rem;
     }

     #blog-page h3 {
       font-size: 2rem;
     }

     #blog-page ul {
       font-size: 1.25rem;
       gap: 1.75rem;
     }



     /* blog list*/
     .blog-box {
      position: relative;
      width: 80vw;
      height: 90vw;
      gap: 2vw;
     }

     .blog-img {
       width: 100%;
       height: auto;
     }

     .blog-type {
      font-size: 3.5vw;
       position: absolute;
       top: 4vw;
     }

     .blog-name {
      font-size: 4vw;
      line-height: 6vw;
      height: auto;
      min-height: 12vw;
     }

     .blog-date {
      font-size: 3vw;
     }

     .blog-btn {
       min-width: 22vw;
       height: 5vw;
       padding: 0 2vw;
       border-radius: 4vw;
     }

     #categories {
       display: none;
     }

     /* footer */
.footerContainer{
  flex-direction: column;
}
.fLeft {
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5vw;
}
.mail-box{
  width: fit-content;
}
.mb-cont{
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5vw;
}
.mb-cont::before{
  display: none;
}
.mail{
  font-size: 2.5vw;
}
.mail-heading{
  font-size: 3.5vw;
}
.fRight{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-top: 4vw;
}
.s-f{
  align-items: center;
}
.s-f::after{
  display: none;
}
.org{
  width: 100%;
  height: auto;
  padding-bottom: 3vw;
  gap: 3vw;
}
.foot-logo-box {
  gap: 0.5vw;
  height: 20vw;
  width: 30vw;
}
.fl-des {
  font-size: 2.8vw;
}
.foot-logo-box img {
  width: 13vw;
}
.fUp div{
  width: 6vw;
  height: 6vw;
}
.fLinks{
  font-size: 3vw;
}
.fCopy{
  font-size: 2.5vw;
  margin-top: 2.5vw;

}
   }


   @media only screen and (min-width: 768px) and (max-width: 1024px) {

     body,
     html {
       margin: 0;
       padding: 0;
     }
 .navbar{
        height: 100vh;
        left: -100vw;
        transition: all 0.4s ease;
    }
    .nav-cont{
        flex-direction: column;
        justify-content: center;
        gap: 5vw;
    }
    .nav-cont ul{
        flex-direction: column;
        padding: 0;
        margin: 0;
    }
    .fintech_logo{
        display: none;
    }
     .container,
    .menu-icon,
    .frame {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20vw;
        height: 20vw;
        position: fixed;
        z-index: 10000;
        right: 0;
        top: 0;
    }

   .frame {
      width: 15vw;
      height: 15vw;
    }
    
    .menu-icon {
      width: 7vw;
      height: 7vw;
      position: relative;
      cursor: pointer;
    }
    
    .line-1 {
      background: #000000;
      width: 100%;
      height: 0.7vw;
      border-radius: 5px;
      position: absolute;
    }
    
    .line-2 {
      background: #000000;
      width: 100%;
      height: 0.7vw;
      border-radius: 5px;
      position: absolute;
    }
    
    .line-3 {
      background: #000000;
      width: 100%;
      height: 0.7vw;
      border-radius: 5px;
      position: absolute;
    }
    
    .line-1 {
      transition: 500ms;
      transform: translateY(-2vw);
      animation: animateReverse 600ms ease-in-out;
    }
    
    .line-2 {
      transition: 500ms;
      transform: scale(1);
      opacity: 1;
    }
    
    .line-3 {
      transition: 500ms;
      transform: translateY(2vw);
      animation: animate2Reverse 600ms ease-in-out;
    }
    
    .menu-icon.active {
      animation: rotateIcon 600ms ease-in-out forwards;
    }
    
    .line-1.active {
      animation: animate 600ms ease-in-out forwards;
    }
    
    .line-2.active {
      transform: scale(0);
      opacity: 0;
    }
    
    .line-3.active {
      animation: animate2 600ms linear forwards;
    }
    
    @keyframes animate {
      50% {
        transform: translateY(0px) rotate(0deg);
      }
      100% {
        transform: translateY(0px) rotate(-45deg);
      }
    }
    @keyframes animateReverse {
      0% {
        transform: translateY(0px) rotate(45deg);
      }
      50% {
        transform: translateY(0px) rotate(0deg);
      }
      100% {
        transform: translateY(-3vw) rotate(0deg);
      }
    }
    @keyframes animate2 {
      50% {
        transform: translateY(0px) rotate(0deg);
      }
      100% {
        transform: translateY(0px) rotate(45deg);
      }
    }
    @keyframes animate2Reverse {
      0% {
        transform: translateY(0px) rotate(-45deg);
      }
      50% {
        transform: translateY(0px) rotate(0deg);
      }
      100% {
        transform: translateY(3vw) rotate(0deg);
      }
    }
    @keyframes rotateIcon {
      100% {
        transform: rotate(90deg);
      }
    } 
    .navactive{
        left: 0;
    }
    .mob-frs-logo{
        position: fixed;
        width: 25vw;
        top: 4vw;
        left: 4vw;
        z-index: 30;
        display: block;
    }

     #blog-page h1 {
       font-size: 4.4vw;
     }

     .blog-page-container {
       width: 90%;
       flex-direction: column;
     }

     .blog-cont {
       width: 100%;
     }

     .blog-top {
       width: 90%;
     }

     .blog-top p {
       font-size: 1.5rem;
     }

     .blog-top {
       width: 90%;
       min-height: 50vw;
       height: auto;
     }

     .blog-top p {
       border-radius: 2vw;
       font-size: 1.25rem;
       margin: 0;
       padding: 4vw;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }

     .blog-image {
       width: 100%;
       height: auto;
       align-items: start;
     }

     .para {
       color: #ddd;
       font-family: 'figtree';
       font-size: 1.5rem;
       line-height: 2.25rem;
     }

     .social-icons {
       display: flex;
       font-size: 3vw;
     }

     h1 {
       font-size: 2.25rem;
     }

     .nav-links li {
       font-size: 3vw;
     }

     #blog-page p {
       font-size: 2.8vw;
       line-height: 5vw;
     }

     #blog-page ul {
       display: flex;
       font-size: 2.8vw;
     }

     #blog-page h2 {
       font-size: 3.5vw;
     }
#blog-page h3 {
    font-size: 3vw;
}
     h3 {
       font-size: 2rem;
     }

     ul {
       font-size: 1.25rem;
       gap: 1.75rem;
     }

     .event-logo {
       width: 12vw;
     }

     /* blog list*/
     .blog-box {
       position: relative;
       width: 40vw;
       height: 60vw;
       gap: 2vw;
     }

     .blog-img {
       width: 100%;
       height: auto;
     }

     .blog-type {
       font-size: .75rem;
       position: absolute;
       top: 4vw;
     }

     .blog-name {
       font-size: 0.825rem;
       line-height: 1rem;
       height: auto;
       min-height: 12vw;
     }

     .blog-date {
       font-size: 0.75rem;
     }

     .blog-btn {
       min-width: 22vw;
       height: 5vw;
       padding: 0 2vw;
       border-radius: 4vw;
     }

     #categories {
       display: none;
     }

     /* footer */
.footerContainer{
  flex-direction: column;
}
.fLeft {
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5vw;
}
.mail-box{
  width: fit-content;
}
.mb-cont{
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5vw;
}
.mb-cont::before{
  display: none;
}
.mail{
  font-size: 2.2vw;
}
.mail-heading{
  font-size: 2.7vw;
}
.fRight{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-top: 4vw;
}
.s-f{
  align-items: center;
}
.s-f::after{
  display: none;
}
.org{
  width: 100%;
  height: auto;
  padding-bottom: 3vw;
  gap: 3vw;
}
.foot-logo-box {
  gap: 0.5vw;
  height: 20vw;
  width: 30vw;
}
.fl-des {
  font-size: 2.8vw;
}
.foot-logo-box img {
  width: 13vw;
}
.fUp div{
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
}
.fUp div svg{
    width: 4vw;
}
.fLinks{
  font-size: 3vw;
}
.fCopy{
  font-size: 2.5vw;
  margin-top: 2.5vw;

}
   }