*
{
    font-family: "Outfit";
    cursor: default;
}

section
{
    color: #fff;
    padding-block: 150px;
    position: relative;
    overflow: clip;
   
}

a
{
    color: #fff;
    overflow: hidden;
    font-size: 18px;
    cursor: pointer !important;
    
    display: block;
    min-width: 160px;
    width: fit-content;
    position: relative;
    /* border: 1px solid #ff0000; */
    line-height: 1.4em;
    transform: translateY(0px);
    transition: all .5s;
    height: 1.7em; 


    &:before
    {
        transition: all .5s;
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        border-bottom: 1px solid #fff;
        width: 0px;
    }

    &:after
    {
        content:"";
        position: absolute;
        width: 14px;
        height: 14px;
        top:6px;
        right: 0px;
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2H20M20 2V20M20 2L2 20' stroke='white' stroke-width='3'/%3E%3C/svg%3E%0A");

    

    }

    & div
    {
        cursor: pointer;
        animation-name: link;
        animation-duration: .4s; 
        
    }

   

    &:hover 
    {
        &:before
        {
            width: 100%;
        }

        div
        {
            animation-name: linkHover;
            animation-duration: .4s;
            animation-fill-mode: forwards;
        } 
    }

    
    &.simple
    {
        div:first-child
        {
            opacity: .2;
        }
        &::after, &::before
        {
            display: none;
        }

    }
}
@keyframes link
{
    0%
    {
        transform: translateY(-1.2em);
    }
    100%
    {
        transform: translateY(0em);
    }
}
@keyframes linkHover
{
    0%
    {
        transform: translateY(0px);
    }
    100%
    {
        transform: translateY(-1.4em);
    }
}

.tag
{
    color: #dabb61
}
.hh1
{
    font-size: 90px;
    line-height: 1.1em;
    font-weight: 500;
}
.hh2
{
    font-size: 68px;
    line-height: 1.1em;
    font-weight: 500;
}

.hh3
{
    font-size: 45px;
    line-height: 1em;
}

.relative
{
    position: relative;
}

.opacity-3
{
    opacity: .3;;
}

section.about
{
    background-image: url(/assets/img/bg-barb-wire.png);
    height: auto;
    padding-bottom: 200px;;
    overflow: hidden;

    .border-forever
    {
        width: fit-content;
        position: relative;
        &::before, &::after
        {
            content: '';
            position: absolute;
            transform: translateY(.8em);
            height: 1px;
            width: 100vw;
            left: calc(-100vw - 10px);
            background-color: #fff;
            

        }
        
        &::after
        {
            transform: translateY(-.8em);
            left: calc(100% + 15px);
        }
    }
    .active
    {
        position: absolute;
        top: 0px;
    }

    .gallery-wrapper
    {
        /* height: 100vh; */
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        /* margin-left:100vw; */

        .gallery
        {
            position: relative;
            z-index: 1;
            height: 50vh;
            white-space: nowrap;
            display: block;

            .gallery-box
            {
        
                width: 50vh;
                margin: 0 30px;
                display: inline-block;

                img {
                
                    height: 100%;
                    width: 100%;
                }

                &:nth-child(odd) {
                
                    vertical-align: top;
                }

                &:nth-child(even) {
                
                    vertical-align: text-bottom;
                }
            }


        } 
    }
}




section.our-services
{
    .heading
    {
        position: sticky;
        top: 35dvh;
    }

    .card-wrapper
    {
        width: 35%;
        margin: auto;
        
        position: relative;

        .card
        {
            width: 100%;
            background-color: transparent;
            text-align: left;
            padding: 15px 25px;
            color: #fff;
            border: 1px solid #FFFFFF26;
            border-radius: 2px;
            backdrop-filter: blur(10px);
            margin-top: 50px;
            position: sticky;
            top: 20vh;
            
            overflow: hidden;

            &:nth-child(odd)
            {
                rotate: -3.5deg;
            }

            &:nth-child(even)
            {
                rotate: 3.5deg;
            }

            &:hover
            {
                cursor: default;
                .number
                {
                    color: #000;
                }

                &::before
                {
                    top:0px;
                    right: 0px;

                }

                .video
                {
                    right: 15px;
                    top: 15px;
                }
            }

            &::before
            {
                content:'';
                position: absolute;
                width: 100%;
                height: 100%;
                right: 100%;
                top: 100%;
                background-color: #E7C85899;
                z-index: -1;
                transition: all .4s;
            }


            .number
            {
                font-size: 50px;
                font-weight: 400;
                margin-bottom: 15vh;
                color: #e5af4a;
                transition: all .4s;
                
            }

            p
            {
                margin-block: 20px;
                font-size: 18px;;
                line-height: 1.2em;
            
            }

            .video
            {
                transition: all .4s;
                position: absolute;
                width: 50%;
                right: -50%;
                top: -50%;

            }
        }
    }
  
}

section.video
{
    padding:0px;
    overflow: hidden;
    height: 100dvh;
    position: relative;

    

    .marque-wrapper
    {
        position: absolute;
        height: fit-content;
        top:0px;
        bottom: 0px;
        margin: auto;

        width: max-content;
        backdrop-filter: blur(10px);
        background-color: #00000040;

        animation-name: marqueAnimation;
        animation-duration: 60s; 
        animation-timing-function: linear;
        animation-iteration-count: infinite ;




        & div
        {
            display: contents;
            /* font-size: clamp(26px, 150px, 150px); */
            font-weight: bold;
            font-size: 150px;

            @media (max-width: 767px) {
                font-size: 100px;
            }

            @media (max-width: 575px) {
                font-size: 55px;
            }

            span
            {
                color: #E7C858;
            }
        }

    }

}

@keyframes marqueAnimation {
    
    0%
    {
        transform: translateX(0%)
    }

    100%
    {
        transform: translateX(-50%);
    }
}

section.industries
{
    .container
    {
        position: relative;
    }

    .heading .tag
    {
        text-align: center;
    }
    .industries-items-wrapper
    {
        
    
        a
        {
            font-size: 70px;
            font-weight: bold;
            margin-block: 15px;

            @media (max-width: 991px) {
                font-size: 48px !important;
            }

             @media (max-width: 991px) {
                font-size: 24px !important;
            }
         
        }
    }

    .floating
    {
        position: absolute;
        right:0px;

        .video-wrapper
        {
            overflow-x: clip;
            width: 250px;
            display: flex;
            .video-container
            {
                width: fit-content;
                display: flex;
                
                .video-item
                {
                    position: relative;
                    width: 250px;
                    margin-inline: 1px;

                    div
                    {
                        position: absolute;
                        transform: translateY(calc(-100% - 10px));
                        text-align: right;
                         text-transform: uppercase;
                         font-size: 14px;
                        
                    }
                }
            }
            
           



        }
    }
   

}

section.case-studies
{
    .case-studies-item
    {
        height: fit-content;


        div
        {
            overflow: clip;
            img 
            {
                transition: all .4s;;
            }
        }
       
        &:hover 
        {
            img 
            {
                transform: scale(1.1);
            }
            a:before
            {
                width: 100%;
            }

            a div
            {
                animation-name: linkHover;
                animation-duration: .4s;
                animation-fill-mode: forwards;
            } 
        }
    }
}


section.testimonials
{
    padding-bottom: 50vh;
    .heading
    {
        position: sticky;
        top: 40vh;
      
        .marque-wrapper
        {
         
            height: fit-content;
            top:0px;
            bottom: 0px;
            margin: auto;

            width: max-content;
            backdrop-filter: blur(10px);
            background-color: #00000040;

            animation-name: marqueAnimation;
            animation-duration: 60s; 
            animation-timing-function: linear;
            animation-iteration-count: infinite ;

            & div
            {
                display: contents;
                /* font-size: clamp(26px, 150px, 150px); */
                font-weight: bold;
                font-size: 150px;

                @media (max-width: 767px) {
                    font-size: 100px;
                }

                @media (max-width: 575px) {
                    font-size: 55px;
                }

                span
                {
                    color: #E7C858;
                }
            }

        }


    }
    .speedy
    {
        animation-duration: 30s !important;
    }

    .testimonial-wrapper
    {
        position: relative;
        margin-top: 50px;
        padding-inline: 50px;
        
        z-index: 1;
    
        .testimonial-item
        {
            border: 1px solid #D3A24530;
            background-color: #d3a24512;
            backdrop-filter: blur(10px);
            padding: 30px;
            padding-top: 150px;
            position: relative;
            overflow: clip;
            margin-bottom: 24px;

            &:hover
            {
                &::after
                {
                    left: 0px;
                    bottom: 0px;
                }

                &::before
                {
                    background-image: url("data:image/svg+xml,%3Csvg width='63' height='44' viewBox='0 0 63 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.6567 0.0896759H0.415039V27.1623H17.3787C17.6095 27.1623 17.8172 27.22 18.0018 27.3354C18.1865 27.4508 18.3249 27.6238 18.4173 27.8546C18.5096 28.0393 18.5327 28.247 18.4865 28.4778C18.4403 28.7086 18.3249 28.8932 18.1403 29.0317L7.47745 39.7638L11.0779 43.3643L26.6567 27.7854V0.0896759ZM36.2118 27.1623H53.1754C53.4062 27.1623 53.6139 27.22 53.7986 27.3354C53.9832 27.4508 54.1217 27.6238 54.214 27.8546C54.3063 28.0393 54.3294 28.247 54.2832 28.4778C54.2371 28.7086 54.1217 28.8932 53.937 29.0317L43.2742 39.7638L46.8746 43.3643L62.4535 27.7854V0.0896759H36.2118V27.1623Z' fill='%23EAAB21'/%3E%3Cpath d='M26.6567 0.0896759H0.415039V27.1623H17.3787C17.6095 27.1623 17.8172 27.22 18.0018 27.3354C18.1865 27.4508 18.3249 27.6238 18.4173 27.8546C18.5096 28.0393 18.5327 28.247 18.4865 28.4778C18.4403 28.7086 18.3249 28.8932 18.1403 29.0317L7.47745 39.7638L11.0779 43.3643L26.6567 27.7854V0.0896759ZM36.2118 27.1623H53.1754C53.4062 27.1623 53.6139 27.22 53.7986 27.3354C53.9832 27.4508 54.1217 27.6238 54.214 27.8546C54.3063 28.0393 54.3294 28.247 54.2832 28.4778C54.2371 28.7086 54.1217 28.8932 53.937 29.0317L43.2742 39.7638L46.8746 43.3643L62.4535 27.7854V0.0896759H36.2118V27.1623Z' fill='url(%23paint0_linear_79_2935)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_79_2935' x1='-6.56429' y1='97.4575' x2='80.1547' y2='70.1381' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");

                }

                & .designation
                {
                    color: #000
                }
            }



            &::before
            {
                content: '';
                position: absolute;
                width: 62px;
                height: 43px;
                top: 30px;
                left: 30px;
                background-image: url("data:image/svg+xml,%3Csvg width='63' height='44' viewBox='0 0 63 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.6567 0.0896759H0.415039V27.1623H17.3787C17.6095 27.1623 17.8172 27.22 18.0018 27.3354C18.1865 27.4508 18.3249 27.6238 18.4173 27.8546C18.5096 28.0393 18.5327 28.247 18.4865 28.4778C18.4403 28.7086 18.3249 28.8932 18.1403 29.0317L7.47745 39.7638L11.0779 43.3643L26.6567 27.7854V0.0896759ZM36.2118 27.1623H53.1754C53.4062 27.1623 53.6139 27.22 53.7986 27.3354C53.9832 27.4508 54.1217 27.6238 54.214 27.8546C54.3063 28.0393 54.3294 28.247 54.2832 28.4778C54.2371 28.7086 54.1217 28.8932 53.937 29.0317L43.2742 39.7638L46.8746 43.3643L62.4535 27.7854V0.0896759H36.2118V27.1623Z' fill='%23EAAB21'/%3E%3Cpath d='M26.6567 0.0896759H0.415039V27.1623H17.3787C17.6095 27.1623 17.8172 27.22 18.0018 27.3354C18.1865 27.4508 18.3249 27.6238 18.4173 27.8546C18.5096 28.0393 18.5327 28.247 18.4865 28.4778C18.4403 28.7086 18.3249 28.8932 18.1403 29.0317L7.47745 39.7638L11.0779 43.3643L26.6567 27.7854V0.0896759ZM36.2118 27.1623H53.1754C53.4062 27.1623 53.6139 27.22 53.7986 27.3354C53.9832 27.4508 54.1217 27.6238 54.214 27.8546C54.3063 28.0393 54.3294 28.247 54.2832 28.4778C54.2371 28.7086 54.1217 28.8932 53.937 29.0317L43.2742 39.7638L46.8746 43.3643L62.4535 27.7854V0.0896759H36.2118V27.1623Z' fill='url(%23paint0_linear_79_2935)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_79_2935' x1='-6.56429' y1='97.4575' x2='80.1547' y2='70.1381' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D3A245'/%3E%3Cstop offset='1' stop-color='%23F8D462'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
            }

            &::after
            {
                transition: all .4s;
                content:'';
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #E7C85899;
                left: -100%;
                bottom: -100%;
                z-index: -1;
            }



            .client-name
            {
                font-size: 22px;
                font-weight: bold;
            }

            .designation
            {
                font-size: 16px;
                color:#D3A245;
                transition: all .5s;
            }




        }

        .masti
        {
            transform: translateY(75%);

            @media (max-width: 1199px) {
                transform: translateY(0%);
            }
        }
    }
}



section.cta
{
    cursor: none;
    background-image: url("/assets/img/box-lines.png");
    overflow: clip;

    .header
    {
        cursor: none;
        position: relative;
        z-index: 1;
        padding: 40px;
        
        
    }
    .hover-gallery
    {
         cursor: none;
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0px;
       left: 0px;
     
        div
        {
            position: absolute;
            width: fit-content;
            height: auto;
            transform: scale(0);
          
            
            &.active
            {
                animation-name: popup;
                animation-duration: 1s; 
                animation-fill-mode: forwards;
             
                
            }
        }
    }
    a
    {
        min-width: 225px;
    }
}

@keyframes popup {
    0%
    {        transform: scale(0);   opacity: 0;       }
    20%
    {        transform: scale(1);  opacity: 1;      }
    80%
    {        transform: scale(1);  opacity: 1;      }
    100%
    {        transform: scale(0);   opacity: 0;     }
    
}