/*==================================================
For all the  Mobile Devices
==================================================*/
@media (max-width:600px) { /*20px*/
    /*----------------------------------------------
    For Navigation Bar
    ----------------------------------------------*/
    nav {
        margin: 13px 0;
        padding: 10px 20px 10px 20px;
        z-index: 4;
        width: 100%;
    }
    nav ul li {
        font-size: 19px;
    }
    /*----------------------------------------------
    Brand Logo
    ----------------------------------------------*/
    nav .nav-logo img {
        height: 45px;
    }

    /*----------------------------------------------
    For the say hello btn
    ----------------------------------------------*/
    .nav-btn .nav-btn-content {
        font-size: 15px;
        padding: 10px 15px;
    }
    .nav-bar {
        gap: 18px;
    }

    /*----------------------------------------------
    For Hamburger menu
    ----------------------------------------------*/
    .nav-menu {
        display: block;
        cursor: pointer;
    }
    .nav-menu i {
        font-size: 25px;
    }
    /*----------------------------------------------
    For navigation items
    ----------------------------------------------*/
    nav.sticky .nav-item {
        top: 65px!important;
        background-color: var(--scroll-navigation-background);
    }
    .nav-item {
        z-index: 1;
        display: none;
        flex-direction: column;
        gap: 2em;
        background-color: #fff;
        position: absolute;
        height: 100vh;
        width: 100vw;
        top: 66px;
        left: 0;
        padding: 20px 40px;
    }
    #home .nav-btn {
        display: none;
    }
    .nav-item a {
        width: 100%;
    }
    .nav-item a li {
        text-align: left;
        font-weight: bold;
    }
    /*----------------------------------------------
    Main content of landing page
    ----------------------------------------------*/
    main {
        padding:  0 20px;
    }
    section .org-text h1 {
        font-size: 25px;
        text-align: center;
        /* width: 266px; */
        /* margin: auto; */
    }
    .org-text-container {
        flex-direction: column;
    }
    .org-text {
        width: 100%;
    }
    .org-text-main {
        font-size: 13px;
        font-weight: 400;
    }
    .org-text-plus {
        font-weight: 600;
        font-size: 25px;
    }
    .org-img video,
    .org-img iframe{
        border-radius: 20px;
        width: 100%;
        aspect-ratio: 16/9;
    }
    .org-info{
        margin: 20px 0 15px 0 ;
    }
    .org-text-icon {
        flex-direction: column;
        font-size: 10px;
        text-align: center;
        height: 100%;
        gap: 12px;
    }
    .org-text-icon p{
        text-align: center;
        font-size: 10px;
        font-weight: 400;
      }
    .org-total-project {
        font-size: 23px;
    }
    .org-text-info {
        margin: 17px 20px;
    }

    /*----------------------------------------------
    Videos of landing page
    ----------------------------------------------*/
    .r-work {
        margin: 66px 0 6px 0;
        
    }
    #home .r-work h1,
    .trusted-by {
        font-size: 35px;
    }
    
    .r-work-videos {
        margin: 25px -20px;
        grid-template-areas: "video";
    }
    .homepage-join h2 {
        font-size: 14px;
        margin: 25px 10px;
        line-height: 120.5%;
    }
    .homepage-join button {
        font-size: 20px;
        font-weight: 400;
        padding: 10px 11px;
    }
    .r-work-videos .video {
        width: 100%;
        aspect-ratio: 16/9;
        /* border: 2px solid red; */
    }

    #display-container .display-video iframe {
        width: 100vw;
        aspect-ratio: 16/9;
        height: auto;
        object-fit: cover;
    }
    .close-button {
        top: 4em;
        right: 5.5em;
      }
    /*----------------------------------------------
    Foooter
    ----------------------------------------------*/
    @media (max-width:600px) {
  .footer-left {
    width: 100%;
  }

  .footer-hero-img {
    height: 180px;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

}

    footer {
        grid-template-areas: "footer";
        flex-wrap: wrap;
        align-items: flex-end;
        padding: 16px 12px 12px 12px; 
        width: 100%;
    }
    .footer-row,
    .footer-left {
        justify-content: center;
        gap: 12px;
    }
    .footer-row {
        width: calc(100vw - 24px);
    }
    .footer-img {
        height: 79px;
    }
    .footer-img.foot-img-1 {
        width:50%;
    }
      
    .footer-img.foot-img-2 {
        width:50%;
    }
      
    .footer-img.foot-img-3 {
        width: 25%;
    }
      
    .footer-img.foot-img-4 {
        width: 50%;
    }
      
    .footer-img.foot-img-5 {
        width: 25%;
    }
    .footer-right h2 {
        font-size: 40px;
        font-weight: 700;
        line-height: 99.5%;
        width: 340px;
    }
    .footer-right a.s-hello {
        padding: 15px 43px;
        font-size: 20px;
        font-weight: 500;
        border: 5px solid var(--font-white);
    }
    .footer-org-detail .social-icons .icon i {
        font-size: 22px;
    }
    .footer-org-detail .social-icons .icon {
        gap: 43px;
    }

    /*----------------------------------------------
    Blog Page
    ----------------------------------------------*/
    .blog {
        gap: 52px;
        margin: 20px auto 40px auto;
    }
    .blog-box-container {
        grid-template-areas: "1fr";
        width: calc(100% - 40px);
        gap: 10px;
    }
    .blog-thumbnail {
        height: auto;
        width: calc(100vw - 40px);
    }
    .blog-title-text {
        font-size: 23px;
    }
    .blog-title {
        max-width: 100%;
    }

    /*----------------------------------------------
    Blog Page [indivisual]
    ----------------------------------------------*/
    section.blog-individual {
        width: 100%;
        padding: 20px;
        /* margin-top: -12px; */
        gap: 20px;
        margin: auto;
    }
    .blog-body {
        width: 100%;
    }
    .blog-individual h1.blog-indivisual-title {
        font-size: 35px;
    }
    .individual-blog-thumbnail {
        width: 100%;
        aspect-ratio: 16/9;
    }
    .blog-head {
        display: flex;
        flex-direction: column-reverse;
    }
    .blog-top-recent {
        margin: 0 1rem;
    }
    .blog-description {
        font-size: 15px;
        margin: auto 0;
        width: 100%;
        /* border: 2px solid red; */
    }
    .blog-description li::marker {
        font-size: 17px;
    }
    .blog-topic-cluster {
        display: none;
    }
    /*----------------------------------------------
    About Us page
    ----------------------------------------------*/
    .aboutUs {
        padding: 0 20px;
        gap: 20px;
        margin-top: -12px;
        margin-bottom: 12px;
    }
    .aboutUs-main {
        margin-left: -20px;
        width: 100vw;
    }
    .aboutUs-text {
        font-size: 15px;
    }
    .aboutUs-personal-box {
        padding: 20px;
    }
    .aboutUs-personal-container {
        grid-template-areas: "officials";
    }
    
    /*----------------------------------------------
    Process page
    ----------------------------------------------*/
    /* PROCESS HERO – Center position + left-aligned text */
@media (max-width: 600px) {   
    .process-hero {
        height: 320px !important;
        background-size: cover !important;
        background-position: center top !important;
        padding-left: 40px !important;
        padding-right: 320px !important;

    }

    .process-hero-content h1 {
        font-size: 40px !important;
        line-height: 1.1;
        text-align: left !important;   /* LEFT alignment */
        max-width: 320px;              /* keeps block narrow & centered */
    }

    .process-hero-content h1 span {
        display: block;
        text-align: left !important;
    }
}

    .process {
        padding:20px 20px 0 20px;
    }
    h1.process-hero {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .process-row {
        grid-template-areas: "process";
        margin-left: -20px;
        padding: 20px 20px 40px 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .process-heading {
        font-size: 25px;
        text-align: left;
    }
    .process-text-detail {
        font-size: 15px;
        line-height: 20px;
        width: 100%;
    }
    .process-text {
        width: calc(100vw - 40px);
    }
    .process-row .process-img {
        height: auto;
        width: 100%;
    }
    .process-row:nth-child(even) .process-text,
    .process-row:nth-child(odd) .process-text {
       order: 2; 
       text-align: justify;
    }
    .process-row:nth-child(even) .process-img,
    .process-row:nth-child(odd) .process-img {
        width: 100%;
       order: 1;     
    }
    
    /*----------------------------------------------
    Testimonial page
    ----------------------------------------------*/
    .testimonials {
        gap: 71px;
        padding: 20px;
    }
    .quote {
        padding: 0;
        width: 100%;
    }
    .testimonial-info {
        width: calc(100vw - 40px);
        /* border: 2px solid red; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .quote:nth-child(even) .testimonial-info .testimonial-quote,
    .quote:nth-child(odd) .testimonial-info .testimonial-quote {
        order: 1;
    }
    .quote:nth-child(even) .testimonial-info .testimonial-img,
    .quote:nth-child(odd) .testimonial-info .testimonial-img {
        order: 2;
    }
    .quote:nth-child(even) .testimonial-info .testimonial-desc,
    .quote:nth-child(odd) .testimonial-info .testimonial-desc {
        order: 3;
    }
    .quote .testimonial-info .testimonial-desc .testimonial-name,
    .quote .testimonial-info .testimonial-desc .testimonial-rating {
        text-align: center;
    }
    .quote .testimonial-info .testimonial-desc p.testimonail-words{
        text-align: justify;
    }
    .quote:nth-child(even) .testimonial-quote {
        background: url(/assets/images/background/quote-1-small.svg);
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 18%;
    }
      
    .quote:nth-child(odd) .testimonial-quote {
        background: url(/assets/images/background/quote-2-small.svg);
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 18%;
    }
    .testimonial-img {
        height: 162px;
        width: 162px;
        border-radius: 50%;
        overflow: hidden;
    }
    .testimonial-quote {
        width: 51px;
        height: 35px;
    }
    h2.testimonial-name {
        font-size: 25px;
        width: 100%;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
    p.testimonial-designation {
        font-size: 15px;
    }
    div.rating {
        margin: 0 0 20px 0;
    }
    .org-text-icon {
        /* border: 2px solid red; */
        width: 145px;
    }
    .org-text-icon img {
        /* height: 62px; */
        /* width: auto; */
    }

    /*----------------------------------------------
    Portfolio page
    ----------------------------------------------*/
    /* PROCESS HERO – Center position + left-aligned text */
@media (max-width: 600px) {   
    .portfolio-hero {
        height: 320px !important;
        background-size: cover !important;
        background-position: center top !important;
        padding-left: 40px !important;
        padding-right: 20px !important;
    }
}


    .portfolio-hero-content h1 {
        font-size: 40px !important;
        line-height: 1.1;
        text-align: left !important;   /* LEFT alignment */
        max-width: 320px;              /* keeps block narrow & centered */
    }

    .process-hero-content h1 span {
        display: block;
        text-align: left !important;
    }
}
    #portfolio main section.r-work {
        margin: 0;
    }
    #portfolio main section.r-work h1.r-work-port {
        font-size: 30px;
    }
    .video-menu {
        gap: 12px;
        margin: 50px 0 50px 0;
        line-height: 1;
    }
    .video-menu a {
        font-size: 12px;
    }
    .more-videos {
        font-size: 20px;
        margin: 5px auto 20px;
    }
    .video::before {
        line-height: 18;
        font-size: 18px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 50px;
    }

    /*----------------------------------------------
    Say Hello page
    ----------------------------------------------*/
    .container{
        margin: 20px;
        width: calc(100% - 40px);
        height: 100%;
    }
    .container .content{
        flex-direction: column-reverse;
    }
    .right-side .input-box input,
    .right-side .input-box textarea,
    .right-side p,
    .right-side .button input[type="submit"],
    .text-one,.text-two {
        font-size: 15px;
    }
     .container .content .left-side{
       width: 100%;
       flex-direction: row;
       margin-top: 40px;
       justify-content: center;
       flex-wrap: wrap;
     }
     .container .content .left-side::before{
       display: none;
     }
     .container .content .right-side{
       width: 100%;
       margin-left: 0;
     }

/*==================================================
For all the  Tablet Devices
==================================================*/
@media (min-width:600px) and (max-width:1200px) { /*55px*/
    body {
        overflow: auto;
    }

    /*----------------------------------------------
    For Navigation Bar
    ----------------------------------------------*/
    nav {
        margin: 15px 0;
        padding: 11.25px 55px ; /*(23+29.5)/2 and (20+90)/2*/
    }
    nav.sticky .nav-item {
        top: 72.2px!important;
        background-color: var(--scroll-navigation-background);
    }
    .nav-item {
        position: fixed;
        z-index: 1;
        display: none;
        flex-direction: column;
        gap: 2em;
        background-color: #fff;
        /* border: 2px solid red; */
        height: 100vh;
        width: 100vw;
        top: 105px;
        left: 0;
        padding: 52px 65px;
    }
    .nav-item a {
        width: 100%;
    }
    .nav-item a li {
        text-align: left;
        font-weight: bold;
    }
    nav ul li {
        font-size: 30px;
    }
    /*----------------------------------------------
    Brand Logo
    ----------------------------------------------*/
    nav .nav-logo img {
        height: 30px;
        /* width: 114.5px; */
    }
    .nav-menu i {
        font-size: 30px;
    }

    /*----------------------------------------------
    Hovering into nav items gives the underline
    ----------------------------------------------*/
    nav ul li:hover:not(.nav-btn):before,
    nav ul li:hover:not(.selected):before {
        content: "";
        height: 0.2em;
        width: 100%;
        position: absolute;
        bottom: -0.325em;
        background: var(--primary-red);
    }

    /*----------------------------------------------
    For the say hello btn
    ----------------------------------------------*/
    .nav-btn .nav-btn-content {
        font-size: 15px;
        padding: 12px 35px;
    }
    .nav-bar {
        gap: 53px;
    }
    .nav-btn-mobile {
        display: none;
    }

    /*----------------------------------------------
    For Hamburger menu
    ----------------------------------------------*/
    .nav-menu {
        display: block;
        cursor: pointer;
    }

    /*----------------------------------------------
    For navigation items
    ----------------------------------------------*/
    .nav-item {
        display: none;
    }

    /*----------------------------------------------
    Main content of landing page
    ----------------------------------------------*/
    main {
        padding:  0 55px;
    }
    section .org-text h1 {
        font-size: 37.5px;
    }
    .org-text-main {
        font-size: 16.5px;
        font-weight: 500;
    }
    .org-text-plus {
        font-weight: 700;
        font-size: 35px;
    }
    .org-img video,
    .org-img iframe{
        border-radius: 25px;
        width: calc(50vw - 55px);
        height: auto;
    }
    .org-info{
        margin: 74px 0 ;
    }
    .org-total-project {
        font-size: 37px;
    }
    .org-text-info {
        margin-top: calc((88px + 17px) / 2);
    }
    .org-text-icon {
        flex-direction: column;
    }

    /*----------------------------------------------
    Videos of landing page
    ----------------------------------------------*/
    #home .r-work h1 ,
    .trusted-by{
        font-size: 47.5px;
    }
    .r-work-videos {
        margin: 25px -55px 0;
        grid-template-areas: "video video";
    }
    .homepage-join h2 {
        font-size: 22px;
        margin: 1.0625em 0;
        line-height: 120.5%;
    }
    .homepage-join button {
        font-size: 25px;
        font-weight: 500;
        padding: 12.655px 12.5px;
        margin: 25px auto 0;
    }
    .r-work-videos .video {
        height: 234px;
    }
    #display-container .display-video iframe {
        /* height: 47vh; */
        width: calc(100vw - 4em);
        aspect-ratio: 16/9;
    }

    /*----------------------------------------------
    Foooter
    ----------------------------------------------*/
    footer {
        grid-template-areas: "footer";
        flex-wrap: wrap;
        align-items: flex-end;
        padding: 22.5px 18.5px 18.5px 18.5px;
        width: 100%;
    }
    .footer-row,
    .footer-left {
        gap: 18.5px;
    }

    .footer-left,
    .footer-right {
        width: calc(100vw - 37px);
    }
    .footer-img {
        height: 140.96px;
    }
    .footer-img.foot-img-1 {
        width:50%;
    }
      
    .footer-img.foot-img-2 {
        width:50%;
    }
      
    .footer-img.foot-img-3 {
        width: 25%;
    }
      
    .footer-img.foot-img-4 {
        width: 50%;
    }
      
    .footer-img.foot-img-5 {
        width: 25%;
    }
    .footer-right h2 {
        font-size: 51.747px;
        width: 234px;
    }
    .footer-right a.s-hello {
        padding: 17.635px 52px;
        font-size: 28.675px;
        font-weight: 600;
        border: 6.857px solid var(--font-white);
    }
    .footer-org-detail .social-icons .icon i {
        font-size: 29px;
    }
    .footer-org-detail .social-icons .icon {
        gap: 49.82px;
    }

    /*----------------------------------------------
    Blog Page
    ----------------------------------------------*/
    .blog {
        gap: 52px;
        padding: 55px;
    }
    .blog-body {
        width: 100%;
        /* border: 2px solid red; */

    }
    .blog-box-container {
        grid-template-areas: "1fr 1fr";
        width: 100%;
        gap: 25px;
    }

    .blog-thumbnail {
        height: auto;
        width: 285px;
    }
    .blog-title-text {
        font-size: 30px;
    }
    .blog-title {
        max-width: 100%;
    }

    /*----------------------------------------------
    Blog Page [indivisual]
    ----------------------------------------------*/
    section.blog-individual {
        width: 100%;
        padding: 55px;
        margin-top: -15px;
        gap: 27.5px;
    }
    .blog-individual h1.blog-indivisual-title {
        font-size: 42px;
    }
    .blog-description {
        font-size: 18px;
        margin: auto 0;
        text-align: justify;
    }
    .blog-description li::marker{
        font-size: 30px;
    }
    /*----------------------------------------------
    About Us page
    ----------------------------------------------*/
    .aboutUs {
        padding: 0 55px;
        gap: 40px;
    }
    .aboutUs-main {
        margin-left: -55px;
        width: calc(100vw );
        /* border: 2px solid red; */
    }
    .aboutUs-text {
        font-size: 15px;
    }
    .aboutUs-personal-container {
        grid-template-areas: "officials officials";
        margin: 55px;
        gap: 55px;
    }

    /*----------------------------------------------
    Process page
    ----------------------------------------------*/
    .process {
        padding:55px 55px 0 55px;
    }
    h1.p-work-port {
        font-size: 50px;
        margin-bottom: 55px;
    }
    .process-row {
        grid-template-areas: "process process";
        margin-left: -55px;
        padding: 55px;
        width: calc(100vw - 17px );
        gap: 31.5px;
    }
    .process-heading {
        font-size: 37.5px;
    }
    .process-text-detail {
        font-size: 20.5px;
        line-height: 27.29px;
    }

    /*----------------------------------------------
    Testimonial page
    ----------------------------------------------*/
    .testimonials {
        gap: 101px;
        padding: 55px;
    }
    .quote {
        padding: 0;
        width: 100%;
    }
    .testimonial-info {
        width: calc(100vw - 110px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .quote:nth-child(even) .testimonial-info .testimonial-quote,
    .quote:nth-child(odd) .testimonial-info .testimonial-quote {
        order: 1;
    }
    .quote:nth-child(even) .testimonial-info .testimonial-img,
    .quote:nth-child(odd) .testimonial-info .testimonial-img {
        order: 2;
    }
    .quote:nth-child(even) .testimonial-info .testimonial-desc,
    .quote:nth-child(odd) .testimonial-info .testimonial-desc {
        order: 3;
    }
    .quote .testimonial-info .testimonial-desc .testimonial-name,
    .quote .testimonial-info .testimonial-desc .testimonial-rating {
        text-align: center;
    }
    .quote .testimonial-info .testimonial-desc p.testimonail-words{
        text-align: justify;
        padding: 0 25px;
    }
    .quote:nth-child(even) .testimonial-quote {
        background: url(/assets/images/background/quote-1-small.svg);
        background-repeat: no-repeat;
        scale: 2;
        position: absolute;
        top: 0;
        right: 32%;
    }
      
    .quote:nth-child(odd) .testimonial-quote {
        background: url(/assets/images/background/quote-2-small.svg);
        background-repeat: no-repeat;
        scale: 2;
        position: absolute;
        top: 0;
        left: 32%;
    }
    .testimonial-img {
        height: 262px;
        width: 262px;
        border-radius: 50%;
        overflow: hidden;
    }
    .testimonial-quote {
        width: 51px;
        height: 35px;
    }
    h2.testimonial-name {
        font-size: 30px;
        width: 100%;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
    p.testimonial-designation {
        font-size: 15px;
    }
    div.rating {
        margin: 0 0 20px 0;
    }

    /*----------------------------------------------
    Portfolio page
    ----------------------------------------------*/
    #portfolio main section.r-work {
        margin: 42.67px 0 10px 0;
    }
    #portfolio main section.r-work h1.r-work-port {
        font-size: 50px;
    }
    .video-menu {
        gap: 14px;
        margin: 67.5px 0 32.5px 0;
        line-height: 1;
    }
    .video-menu a {
        font-size: 14px;
    }
    .more-videos {
        font-size: 25px;
        margin: 40px auto 20px;
    }
    .video::before {
        line-height: 13.5;
        font-size: 27px;
    }

    /*----------------------------------------------
    Say Hello page
    ----------------------------------------------*/
    .container{
        margin: 55px;
        width: calc(100% - 110px);
        height: 100%;
    }
    .container .content{
        flex-direction: column-reverse;
    }
    .right-side .input-box input,
    .right-side .input-box textarea,
    .right-side p,
    .right-side .button input[type="submit"],
    .text-one,.text-two {
        font-size: 18px;
    }
     .container .content .left-side{
       width: 100%;
       flex-direction: row;
       margin-top: 40px;
       justify-content: center;
       flex-wrap: wrap;
    }
    .container .content .left-side::before{
       display: none;
    }
    .container .content .right-side{
       width: 100%;
       margin-left: 0;
    }
}

/*==================================================
For all the  Desktop Devices
==================================================*/
@media (min-width:1200px) { /*90px*/
    body {
        overflow: auto;
    }

    /*----------------------------------------------
    For Navigation Bar
    ----------------------------------------------*/
    nav {
        margin: 15px 0;
        padding: 14.5px 90px;
    }

    /*----------------------------------------------
    Hovering into nav items gives the underline
    ----------------------------------------------*/
    nav ul li:hover:not(.nav-btn):before,
    nav ul li:hover:not(.selected):before {
        content: "";
        height: 0.2em;
        width: 100%;
        position: absolute;
        bottom: -0.325em;
        background: var(--primary-red);
    }
    
    /*----------------------------------------------
    Brand Logo
    ----------------------------------------------*/
    nav .nav-logo img {
        height: 30px;
        /* width: 135px; */
    }

    /*----------------------------------------------
    For the say hello btn
    ----------------------------------------------*/
    .nav-btn {
        cursor: pointer;
        /* width: 165px; */
    }
    .nav-btn-mobile {
        display: none;
    }
    .nav-btn-content {
        padding: 10px 30px;
    }
    .nav-btn-content:hover {
        background: linear-gradient(-248.59deg, #1d30ad 12.5%, #8d2533 92.57%);
        transition: background 1s ease-in-out;
        transition-delay: 0.9s;
    }

    /*----------------------------------------------
    For Hamburger menu
    ----------------------------------------------*/
    .nav-menu {
        display: none;
    }

    /*----------------------------------------------
    Main content of landing page
    ----------------------------------------------*/
    main {
        padding:  0 90px;
    }
    section .org-text h1 {
        font-size: 50px;
    }
    .org-text-main {
        font-size: 20px;
        font-weight: 600;
    }
    .org-text-plus {
        font-weight: 800;
        font-size: 45px;
    }
    .org-img video,
    .org-img iframe{
        border-radius: 30px;
        height: auto;
        width: 598px;
    }
    .org-info{
        margin: 40px 0;
    }
    .org-text-info {
        margin-top: 88px;
    }
    .org-text-icon {
        gap: 12.75px;
        font-size: 15px;
        align-items: center;
    }
    .org-text-icon p{
        text-align: left;
    }
    .org-total-project {
        font-size: 40px;
    }
    /*----------------------------------------------
    Videos of landing page
    ----------------------------------------------*/
    .r-work {
        margin: 83px 0 50px 0;
    }
    #home .r-work h1,
    .trusted-by {
        font-size: 60px;
    }
    .r-work-videos {
        margin: 25px -90px;
        grid-template-areas: "video video video";
    }
    .homepage-join h2 {
        font-size: 20px;
        /* margin: 33px 0 0 0; */
        max-width: 450px;
        line-height: 120.5%;
    }
    .homepage-join button {
        font-size: 20px;
        font-weight: 600;
        padding: 15.31px 40px;
        margin:  33px auto;
    }
    .r-work-videos .video {
        height: 270px;
    }

    /*----------------------------------------------
    Foooter
    ----------------------------------------------*/
    footer {
        grid-template-areas: "footer footer";
        flex-wrap: wrap;
        align-items: flex-end;
        padding: 29px 25px 25px 25px;
        width: 100%;
    }
    .footer-row,
    .footer-left {
        gap: 25px;
        justify-content: center;
    }
    .footer-left {
        width: calc(60vw - 37.5px);;
    }
    .footer-right {
        width: calc(40vw - 37.5px);
    }
    .footer-img {
        height: 212.935px;
    }
    .footer-img.foot-img-1 {
        width:50%;
    }
      
    .footer-img.foot-img-2 {
        width:50%;
    }
      
    .footer-img.foot-img-3 {
        width: 25%;
    }
      
    .footer-img.foot-img-4 {
        width: 75%;
    }
      
    .footer-img.foot-img-5 {
        width: 25%;
    }
    .footer-right h2 {
        font-size: 63.495px;
        width: 287px;
    }
    .footer-right a.s-hello {
        padding: 20.27px 61.01px;
        font-size: 37.35px;
        font-weight: 700;
        border: 8.715px solid var(--font-white);
    }
    .footer-org-detail .social-icons .icon i {
        font-size: 36px;
    }
    .footer-org-detail .social-icons .icon i:hover {
        color: #f0cc70e4;
    }
    .footer-org-detail .social-icons .icon {
        gap: 56.65px;
    }
    #display-container .display-video iframe {
        /* height: 75vh; */
        /* width: calc(100vw - 4em); */
        width: 100%;
        aspect-ratio: 16/9;         
    }

    /*----------------------------------------------
    Blog Page
    ----------------------------------------------*/
    .blog {
        gap: 52px;
        padding: 90px;
    }
    .blog-box-container {
        grid-template-areas: "1fr 1fr";
        width: 100%;
        gap: 30px;
        margin: 0 80px;
    }
    .blog-thumbnail {
        height: auto;
        width: 342px;
    }
    .blog-title-text {
        font-size: 40px;
    }
    .blog-title {
        max-width: 760px;
    }

    /*----------------------------------------------
    Blog Page [indivisual]
    ----------------------------------------------*/
    section.blog-individual {
        width: 80%;
        padding:0 10px;
        margin-top: -15px;
        gap: 45px;
        margin: auto;
        /* border: 2px solid red; */
    }
    /* .blog-individual h1.blog-indivisual-title {
        font-size: 52px;
        text-align: center; 
    } */
    .blog-description {
        font-size: 18px;
        margin: auto 0;
        text-align: justify;
    }
    .blog-description li::marker {
        font-size: 35px;
    }

    /*----------------------------------------------
    About Us page
    ----------------------------------------------*/
    .aboutUs {
        padding:0 90px;
        gap: 90px;
        margin-bottom: 50px;
        width: 100%;
        overflow-x: hidden;
        /* border: 2px solid red; */
    }
    .aboutUs-text {
        font-size: 20px;
    }
    .aboutUs-main {
        /* width: calc(100% + 90px);
         */
         width: 100vw;
        margin-left: -90px;
    }
    /* .aboutUs-personal-box {
        padding: 90px;
    } */
    .aboutUs-personal-container {
        grid-template-areas: "officials officials officials";
        margin: 90px;
        margin-top: 0;
        gap: 80px;
    }

    /*----------------------------------------------
    Process page
    ----------------------------------------------*/
    .process {
        padding: 90px 90px 0 90px;
    }
    h1.p-work-port {
        font-size: 70px;
        margin-bottom: 90px;
        display: flex;
        flex-direction: column;
    }
    .process-row {
        grid-template-areas: "process process";
        margin-left: -90px;
        padding: 63px;
        width: calc(100vw - 17px );
        max-height: 470px;
        gap: 71px;
        justify-content: center;
    }
    .process-row .process-text .process-heading{
        font-size: 47px;
        line-height: 48.861px;
    }
    .process-row .process-text .process-text-detail{
        font-size: 20px;
        line-height: 34.592px;
        max-width: 679px;
    }
    .process-row:nth-child(even) .process-text{
       order: 2; 
    }
    .process-row:nth-child(odd) .process-text{
        order: 1; 
     }
    .process-row:nth-child(even) .process-img {
       order: 1;     
    }
    .process-row:nth-child(odd) .process-img {
       order: 2;     
    }
    .process-heading {
        font-size: 50px;
    }
    .process-text-detail {
        font-size: 26px;
        line-height: 34.59px;
    }

    /*----------------------------------------------
    Testimonial page
    ----------------------------------------------*/
    .testimonials {
        gap: 203px;
        padding: 90px 90px 60px 90px;
    }
    .testimonials .p-work-port {
        margin-top: 26px;
        margin-bottom: -21px;
        font-size: 60px;
        /* max-width: 572px; */
    }
    .quote {
        padding: 0;
        width: 100%;
        /* border: 2px solid red; */
    }
    .testimonial-info {
        width: calc(100vw - 180px);
        /* padding: 0 103px; */
        /* border: 2px solid red; */
        gap: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .quote:nth-child(even) .testimonial-quote {
        background: url(/assets/images/background/quote-1.svg);
        background-repeat: no-repeat;
        scale: 1;
        position: absolute;
        top: 0;
        right: 11%;
    }
      
    .quote:nth-child(odd) .testimonial-quote {
        background: url(/assets/images/background/quote-2.svg);
        background-repeat: no-repeat;
        scale: 1;
        position: absolute;
        top: 0;
        left: 11%;
    }
    .testimonial-img {
        height: 208px;
        width: 208px;
        border-radius: 50%;
        overflow: hidden;
    }
    .testimonial-quote {
        width: 308px;
        height: 201px;
    }
    h2.testimonial-name {
        font-size: 40px;
        width: 100%;
        /* justify-content: center; */
        /* margin-top: 20px; */
        flex-direction: column;
        /* line-height: 1.2; */
        /* margin: 16px 0; */
    }
    .quote:nth-child(odd) h2.testimonial-name {
        text-align: right;
    }
    p.testimonial-designation {
        font-size: 20px;
    }
    div.rating {
        margin: 0 0 20px 0;
        /* z-index: 3; */
    }

    /*----------------------------------------------
    Portfolio page
    ----------------------------------------------*/
    #portfolio main section.r-work {
        margin:  80px 0 0 0;
    }
    #portfolio main section.r-work h1.r-work-port {
        font-size: 70px;
        max-width: 560px;
    }
    .video-menu {
        gap: 19px;
        margin: 86px 0 44px 0;
        line-height: 1;
    }
    .video-menu a {
        font-size: 20px;
    }
    .video::before {
        line-height: 11.5;
        font-size: 37px;
        
    }
    .more-videos {
        margin: 31px auto;
    }

    /*----------------------------------------------
    Say Hello page
    ----------------------------------------------*/
    .container{
        margin: 90px;
        width: calc(100% - 180px);
        height: 100%;
    }
    .right-side .input-box input,
    .right-side .input-box textarea,
    .right-side p,
    .right-side .button input[type="submit"],
    .text-one,.text-two {
        font-size: 19px;
    }

    .faq-body {
        width: 80%;
        margin: auto;
        margin-top: 10px;
    }
}