@import url("../fonts/degular/stylesheet.css");
*{
    font-size: 20px;
    line-height: 1.3em;
    font-family: "degular_displayregular";
    letter-spacing: 1px;
    scroll-padding-top: 250px;
} 

:root
{
    --primaryColor:#EEC643;
    --secondaryColor:#0D21A1;
    --activeNavWidth: 110px;
    --activeNavHeight: 40px;
    --activeNavX: -1000px;
    --activeNavY: -5px;
    --activeNavOpacity: 0;

    --angle: 0deg;

    --bs-border-radius: 12px !important;
    --serviceBorderHeight:30px;

}
a.link-with-arrow
{
    text-decoration: none;
    color:#0D21A1;
 
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding-right:25px;

    &:before
    {
        content:'';
        position: absolute;
        right: 0px;
        top:6px;
        width:16px;
        height:14px;
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7H15M15 7L8 1M15 7L8 13' stroke='%230D21A1' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }
}

a.btn-pulse
{
    transition: all .5s;
    position: relative;
    padding-right:60px;

    &:hover, &:active
    {
        transition: all .5s;
        background-color: #e0bb3f;

        &:after
        {
            animation-name: pulse;
            animation-duration: 1.5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;

        }
    }

    &:before, &:after
    {
        content:'';
        position:absolute;
        background-color:#ddbd48;
        border: 2px solid #fff;
        width: 16px;
        height: 16px;
        border-radius: 100px;
        right:25px;
        top:0px;
        bottom:0px;
        margin:auto;
        z-index: 1;
    }

    &:after
    {
        border:1px solid #F1D169;
        background-color: #E2BC3F;
       z-index:0;
    }
}


html
{
    scroll-snap-type: y proximity;
    height: 100dvh;
}

.hh1
{
    font-size: 90px;
    line-height: .83em;
}

.hh2
{
    font-size: 70px;
    line-height: .9em;
}
.hh3
{
    font-size: 57px;
    line-height: .9em;
}

.hh4
{
    font-size: 56px;
    line-height: .9em;
}

.hh5
{
    font-size: 66px;
    line-height: 1.1em;
}

section
{
    width: 100%;
    padding-block: 100px;
    overflow-x: clip;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}



.btn-primary
{
    display: flex;
    transition: all .5s;
    width: fit-content;   
    background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
    border-radius: 100px;
    position: relative;
    text-align: center;
    height: 50px;;
    
    box-sizing: border-box;
    color:#fff;

    &::before {
        border-radius: 100px;
        content: '';
        background-image: linear-gradient(to bottom, #81b8fd 0%, #81b8fd 100%);
        top: -2px;
        left: -2px;
        bottom: -2px;
        right: -2px;
        position: absolute;
        z-index: -1;

    }

    div.wrapper
    {
        border-radius: 100px;
        height: 50px;
        width:100%;
        padding: 10px 25px;
        overflow: hidden;
        position: relative;
        
        & div
        {
            transition:all .4s;
            color: #fff;
            z-index: 3;

            svg
            {
                margin-left:10px;
            }
        }

        div.btn-content
        {
            position: relative;
            margin-top: 3px;
            z-index: 10 !important;
        }

        div:nth-child(2)
        {
            font-weight: 600;
            margin-top:30px;
            background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;

        }

        span
        {
            position: absolute;
            width: 0;
            height: 0;
            bottom:0px;
            border-radius: 50%;
            background-color: #fff;
            transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
            transform: translate(-50%,50%);
            z-index: 0;
        }
    }

    
}
.btn-primary:hover
{
    div.wrapper 
    {
        span
        {
            width: 500px;
            height: 500px;
        }
        div.btn-content
        {
            transition:all .4s;
            transform: translateY(-55px);
            
        }
    }

 
}

.btn-form
{
    display: flex;
    transition: all .5s;
    width: 100%;   
    background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
    border-radius: 100px;
    position: relative;
    text-align: center;
    height: 60px;;
    border: none;
    box-sizing: border-box;
    color:#fff;
    padding: 0;

    &::before {
        border-radius: 100px;
        content: '';
        background-image: linear-gradient(to bottom, #81b8fd 0%, #81b8fd 100%);
        top: -2px;
        left: -2px;
        bottom: -2px;
        right: -2px;
        position: absolute;
        z-index: -1;

    }

    div.wrapper
    {
        border-radius: 100px;
        height: 60px;
        width: 100%;
        padding: 13px 25px;
        overflow: hidden;
        position: relative;
        
        & div
        {
            transition:all .4s;
            color: #fff;
            z-index: 3;

            svg
            {
                margin-left:10px;
            }
        }

        div.btn-content
        {
            position: relative;
            margin-top: 3px;
            z-index: 10 !important;
        }

        div:nth-child(2)
        {
            font-weight: 600;
            margin-top:30px;
            background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;

        }

        span
        {
            position: absolute;
            width: 0;
            height: 0;
            bottom:0px;
            border-radius: 50%;
            background-color: #fff;
            transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
            transform: translate(-50%,50%);
            z-index: 0;
        }
    }

    
}
.btn-form:hover
{
    div.wrapper 
    {
        span
        {
            width: 500px;
            height: 500px;
        }
        div.btn-content
        {
            transition:all .4s;
            transform: translateY(-55px);
            
        }
    }

 
}

.btn-form-1
{
    display: flex;
    transition: all .5s;
    width: fit-content;   
    background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
    border-radius: 100px;
    position: relative;
    text-align: center;
    height: 52px;;
    border: none;
    box-sizing: border-box;
    color:#fff;
    padding: 0;

    &::before {
        border-radius: 100px;
        content: '';
        background-image: linear-gradient(to bottom, #81b8fd 0%, #81b8fd 100%);
        top: -2px;
        left: -2px;
        bottom: -2px;
        right: -2px;
        position: absolute;
        z-index: -1;

    }

    div.wrapper
    {
        border-radius: 100px;
        height: 52px;
        width: 100%;
        padding: 13px 25px;
        overflow: hidden;
        position: relative;
        
        & div
        {
            transition:all .4s;
            color: #fff;
            z-index: 3;

            svg
            {
                margin-left:10px;
            }
        }

        div.btn-content
        {
            position: relative;
            margin-top: 0px;
            z-index: 10 !important;
        }

        div:nth-child(2)
        {
            font-weight: 600;
            margin-top:30px;
            background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;

        }

        span
        {
            position: absolute;
            width: 0;
            height: 0;
            bottom:0px;
            border-radius: 50%;
            background-color: #fff;
            transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
            transform: translate(-50%,50%);
            z-index: 0;
        }
    }

    
}
.btn-form-1:hover
{
    div.wrapper 
    {
        span
        {
            width: 500px;
            height: 500px;
        }
        div.btn-content
        {
            transition:all .4s;
            transform: translateY(-55px);
            
        }
    }

 
}

.btn-live-chat
{
    display: flex;
    transition: all .5s;
    width: fit-content;   
    background-color: #fff;
    border-radius: 100px;
    position: relative;
    text-align: center;
    height: 50px;;
    
    box-sizing: border-box;
    color:#fff;

    &::before {
        border-radius: 100px;
        content: '';
        background-image: linear-gradient(to bottom, #81b8fd 0%, #81b8fd 100%);
        top: -2px;
        left: -2px;
        bottom: -2px;
        right: -2px;
        position: absolute;
        z-index: -1;

    }

    div.wrapper
    {
        border-radius: 100px;
        height: 50px;
        width:100%;
        padding: 10px 25px;
        overflow: hidden;
        position: relative;
        
        & div
        {
            transition:all .4s;
            color: #fff;
            z-index: 3;

            svg
            {
                margin-left:10px;
            }
        }

        div.btn-content
        {
            position: relative;
            margin-top: 3px;
            z-index: 10 !important;

            div:nth-child(1)
            {
                font-weight: 600;
                background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            div:nth-child(2)
            {
                margin-top:30px;
            }
        }

      
        span
        {
            position: absolute;
            width: 0;
            height: 0;
            bottom:0px;
            border-radius: 50%;
            background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 60%);
            transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
            transform: translate(-50%,50%);
            z-index: 0;
        }
    }

    
}

.btn-live-chat:hover
{
    div.wrapper 
    {
        span
        {
            width: 500px;
            height: 500px;
        }
        div.btn-content
        {
            transition:all .4s;
            transform: translateY(-55px);
            
        }
    }
}


/**** WEBSITE HEADER ****/
header {
    background-color: #FFFFFFED;
    box-shadow: 0 4px 24px 0 #00000080;
    padding: 12px 0;
    position: relative;
    z-index: 100;

    & .main-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .main-nav ul {
            display: flex;
            align-items: center;
            gap: 30px;

            li{

                a {
                    font-size: 16px;
                    color: #000;
                    opacity: 60%;
                    /* transition: all .5s; */

                    &:hover {
                        color: #212121;
                        font-weight: 700;
                        opacity: 100%;
                    }

                    &.active {
                        font-weight: 700;
                        color: #000 !important;
                        opacity: 1;
                    }
                }
                
            }
        }

        & .contact-info {

            a {
                font-size: 16px;
                color: #000000;
            }

            .email-cta {
                color: #fff;
                background: linear-gradient(135deg, rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
                border-radius: 100px;
                display: inline-block;
                padding: 4px 14px 4px 4px;
                margin-left: 10px;
            }
        }
    }
}

@keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#topHeader {
    transition: all .5s;
}

.inner-header {
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(7.5px);
}

.nav-sticky {
    background-color: #ffffff;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    animation: enter .5s ;
}

@keyframes bgRotate {
0%
{
   
    transform: rotate(0deg);

}
100% {
    
    transform: rotate(360deg);
}
}

  


/*********** HOME START ***********/

/**** HERO ****/
section.hero-home
{
   /* color:#fff; */
   /* background-color:#1e1e1eb4; */
   overflow: hidden;
   padding: 0px;
   position: relative;
   background-image: url('/assets/img/home/hero-bg.png');
   
   .content
   {
        /* margin-block: 150px; */
        margin-top: 180px;
        margin-bottom: 150px;
   }

   div
   {
    color:#333333;

    .text-stroke
    {
        color: transparent;
        -webkit-text-stroke: 1px #333333;

        &.snake
        {
            margin-left:20px;
            position: relative;

            &::before
            {
                content:'';
                position: absolute;
                width:500px;
                height: 28px;
                left: -520px;
                top: 35px;
                background-position: right;
                background-image: url("data:image/svg+xml,%3Csvg width='700' height='28' viewBox='0 0 700 28' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect width='700' height='28' fill='url(%23pattern0_21_674)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_21_674' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_21_674' transform='scale(0.00142857 0.0357143)'/%3E%3C/pattern%3E%3Cimage id='image0_21_674' width='700' height='28' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAAcCAYAAACDOWyEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuZjM1NGVmYywgMjAyMy8xMS8wOS0xMjo0MDoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjUgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNS0wNC0yMVQxODozMDo0MiswNTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjUtMDQtMjFUMTg6MzI6NTgrMDU6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjUtMDQtMjFUMTg6MzI6NTgrMDU6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4MDk3YTZiLWM1MzEtYzg0Yi05MWVhLTdlMmQ0ZjRlOTBlYiIgeG1wTU06RG9jdW1lbnRJRD0i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'/%3E%3C/defs%3E%3C/svg%3E%0A");
            }
        }
    }

   }

    .logos
    {
        position: relative;
        width: 380px;
        z-index: 1;
        
        .logo-container
        {
            width:175px;

            & img {
                border-radius: 30px;
            }

        }
        .down, .up
        {
            left: 0px;
            display: flex;
            gap: 20px;
            flex-direction: column;
            position: absolute;
            animation-name: scrolling-down;
            animation-duration: 15s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        
        .up {
            left: 200px;
            animation-name: scrolling-up;
        }
    }   

    /* &::before, &::after
    {
        content:'';
        position: absolute;
        top:0px;
        left:0px;
        width: 100%;
        height: 100px;
        background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
        z-index: 1;
    } */

    &::after
    {
        content:'';
        position: absolute;
        width: 100%;
        height: 100px;
        bottom:0px;
        /* background: linear-gradient(0deg,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%); */
        background: #FFF;
        filter: blur(47px);
        z-index: 1;
    }
    .video-container 
    {
        height: 100%;
        width: 100%;
        position: absolute;
        top:0px;
        left:0px;
        mix-blend-mode: screen;
        
        & video 
        {
            width: 100%;
            height: 100%;
            position: absolute;
            object-fit: cover;
            z-index: -1;
        }
    }

    .social-icons
    {
        position: absolute;
        right:70px;
        top:0px;
        bottom:0px;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;

        a
        {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100px;
            border:1px solid #B0B0B0;
            background-repeat: no-repeat;
            background-position: center;

            &.facebook{
                /* background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.9H5.42857L6 4.5H4V3.3C4 2.682 4 2.1 5.14286 2.1H6V0.0840001C5.81371 0.0582001 5.11029 0 4.36743 0C2.816 0 1.71429 0.9942 1.71429 2.82V4.5H0V6.9H1.71429V12H4V6.9Z' fill='white'/%3E%3C/svg%3E%0A"); */
                background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.9H5.42857L6 4.5H4V3.3C4 2.682 4 2.1 5.14286 2.1H6V0.0840001C5.81371 0.0582001 5.11029 0 4.36743 0C2.816 0 1.71429 0.9942 1.71429 2.82V4.5H0V6.9H1.71429V12H4V6.9Z' fill='%23212121'/%3E%3C/svg%3E%0A");
            }

            &.instagram
            {
                /* background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.97691 1.91669H9.41025C11.0991 1.91669 12.4714 3.28891 12.4714 4.9778V9.41113C12.4714 10.223 12.1488 11.0016 11.5748 11.5757C11.0007 12.1497 10.2221 12.4722 9.41025 12.4722H4.97691C3.28802 12.4722 1.9158 11.1 1.9158 9.41113V4.9778C1.9158 4.16594 2.23831 3.38734 2.81238 2.81327C3.38645 2.2392 4.16506 1.91669 4.97691 1.91669ZM4.87136 2.97224C4.36745 2.97224 3.88417 3.17242 3.52785 3.52874C3.17154 3.88506 2.97136 4.36833 2.97136 4.87224V9.51669C2.97136 10.567 3.82108 11.4167 4.87136 11.4167H9.5158C10.0197 11.4167 10.503 11.2165 10.8593 10.8602C11.2156 10.5039 11.4158 10.0206 11.4158 9.51669V4.87224C11.4158 3.82196 10.5661 2.97224 9.5158 2.97224H4.87136ZM9.96441 3.76391C10.1394 3.76391 10.3072 3.83342 10.4309 3.95714C10.5546 4.08086 10.6241 4.24866 10.6241 4.42363C10.6241 4.5986 10.5546 4.7664 10.4309 4.89013C10.3072 5.01385 10.1394 5.08335 9.96441 5.08335C9.78944 5.08335 9.62164 5.01385 9.49792 4.89013C9.3742 4.7664 9.30469 4.5986 9.30469 4.42363C9.30469 4.24866 9.3742 4.08086 9.49792 3.95714C9.62164 3.83342 9.78944 3.76391 9.96441 3.76391ZM7.19358 4.55558C7.89346 4.55558 8.56467 4.8336 9.05956 5.32849C9.55444 5.82338 9.83247 6.49459 9.83247 7.19446C9.83247 7.89434 9.55444 8.56555 9.05956 9.06044C8.56467 9.55533 7.89346 9.83335 7.19358 9.83335C6.4937 9.83335 5.82249 9.55533 5.3276 9.06044C4.83272 8.56555 4.55469 7.89434 4.55469 7.19446C4.55469 6.49459 4.83272 5.82338 5.3276 5.32849C5.82249 4.8336 6.4937 4.55558 7.19358 4.55558ZM7.19358 5.61113C6.77365 5.61113 6.37093 5.77795 6.07399 6.07488C5.77706 6.37181 5.61025 6.77454 5.61025 7.19446C5.61025 7.61439 5.77706 8.01712 6.07399 8.31405C6.37093 8.61098 6.77365 8.7778 7.19358 8.7778C7.61351 8.7778 8.01623 8.61098 8.31317 8.31405C8.6101 8.01712 8.77691 7.61439 8.77691 7.19446C8.77691 6.77454 8.6101 6.37181 8.31317 6.07488C8.01623 5.77795 7.61351 5.61113 7.19358 5.61113Z' fill='white'/%3E%3C/svg%3E%0A"); */
                background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.97713 1.91406H9.41046C11.0993 1.91406 12.4716 3.28628 12.4716 4.97517V9.40851C12.4716 10.2204 12.1491 10.999 11.575 11.573C11.0009 12.1471 10.2223 12.4696 9.41046 12.4696H4.97713C3.28824 12.4696 1.91602 11.0974 1.91602 9.40851V4.97517C1.91602 4.16332 2.23852 3.38471 2.81259 2.81064C3.38666 2.23657 4.16527 1.91406 4.97713 1.91406ZM4.87157 2.96962C4.36766 2.96962 3.88439 3.1698 3.52807 3.52612C3.17175 3.88243 2.97157 4.36571 2.97157 4.86962V9.51406C2.97157 10.5643 3.82129 11.4141 4.87157 11.4141H9.51602C10.0199 11.4141 10.5032 11.2139 10.8595 10.8576C11.2158 10.5012 11.416 10.018 11.416 9.51406V4.86962C11.416 3.81934 10.5663 2.96962 9.51602 2.96962H4.87157ZM9.96463 3.76128C10.1396 3.76128 10.3074 3.83079 10.4311 3.95451C10.5548 4.07823 10.6243 4.24604 10.6243 4.42101C10.6243 4.59598 10.5548 4.76378 10.4311 4.8875C10.3074 5.01122 10.1396 5.08073 9.96463 5.08073C9.78966 5.08073 9.62185 5.01122 9.49813 4.8875C9.37441 4.76378 9.3049 4.59598 9.3049 4.42101C9.3049 4.24604 9.37441 4.07823 9.49813 3.95451C9.62185 3.83079 9.78966 3.76128 9.96463 3.76128ZM7.19379 4.55295C7.89367 4.55295 8.56488 4.83098 9.05977 5.32586C9.55466 5.82075 9.83268 6.49196 9.83268 7.19184C9.83268 7.89172 9.55466 8.56293 9.05977 9.05782C8.56488 9.5527 7.89367 9.83073 7.19379 9.83073C6.49392 9.83073 5.82271 9.5527 5.32782 9.05782C4.83293 8.56293 4.5549 7.89172 4.5549 7.19184C4.5549 6.49196 4.83293 5.82075 5.32782 5.32586C5.82271 4.83098 6.49392 4.55295 7.19379 4.55295ZM7.19379 5.60851C6.77387 5.60851 6.37114 5.77532 6.07421 6.07225C5.77727 6.36919 5.61046 6.77191 5.61046 7.19184C5.61046 7.61177 5.77727 8.01449 6.07421 8.31143C6.37114 8.60836 6.77387 8.77517 7.19379 8.77517C7.61372 8.77517 8.01645 8.60836 8.31338 8.31143C8.61031 8.01449 8.77713 7.61177 8.77713 7.19184C8.77713 6.77191 8.61031 6.36919 8.31338 6.07225C8.01645 5.77532 7.61372 5.60851 7.19379 5.60851Z' fill='%23212121'/%3E%3C/svg%3E%0A");
            }

            &.twitter
            {
                /* background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7147 3.97224C12.3083 4.15696 11.8703 4.27835 11.4164 4.33641C11.8808 4.05669 12.2397 3.61335 12.4086 3.0803C11.9706 3.34419 11.485 3.52891 10.9731 3.63446C10.5561 3.18058 9.97028 2.91669 9.30528 2.91669C8.065 2.91669 7.05167 3.93002 7.05167 5.18085C7.05167 5.3603 7.07278 5.53447 7.10973 5.69808C5.23084 5.60308 3.55778 4.70058 2.44417 3.33363C2.24889 3.66613 2.13806 4.05669 2.13806 4.46835C2.13806 5.25474 2.53389 5.95141 3.14611 6.34724C2.77139 6.34724 2.42306 6.24169 2.11695 6.08335V6.09919C2.11695 7.19696 2.89806 8.1153 3.9325 8.32113C3.60039 8.41202 3.25172 8.42467 2.91389 8.35808C3.05724 8.808 3.33798 9.20168 3.71665 9.48379C4.09532 9.7659 4.55288 9.92225 5.025 9.93085C4.2247 10.5644 3.23267 10.9069 2.21195 10.902C2.0325 10.902 1.85306 10.8914 1.67361 10.8703C2.67639 11.5142 3.86917 11.8889 5.14639 11.8889C9.30528 11.8889 11.5906 8.43724 11.5906 5.44474C11.5906 5.34446 11.5906 5.24946 11.5853 5.14919C12.0286 4.83252 12.4086 4.43141 12.7147 3.97224Z' fill='white'/%3E%3C/svg%3E%0A"); */
                background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7149 3.96962C12.3085 4.15434 11.8705 4.27573 11.4166 4.33378C11.8811 4.05406 12.2399 3.61073 12.4088 3.07767C11.9708 3.34156 11.4852 3.52628 10.9733 3.63184C10.5563 3.17795 9.9705 2.91406 9.30549 2.91406C8.06522 2.91406 7.05188 3.9274 7.05188 5.17823C7.05188 5.35767 7.073 5.53184 7.10994 5.69545C5.23105 5.60045 3.55799 4.69795 2.44438 3.33101C2.24911 3.66351 2.13827 4.05406 2.13827 4.46573C2.13827 5.25212 2.53411 5.94878 3.14633 6.34462C2.77161 6.34462 2.42327 6.23906 2.11716 6.08073V6.09656C2.11716 7.19434 2.89827 8.11267 3.93272 8.31851C3.6006 8.40939 3.25193 8.42204 2.91411 8.35545C3.05745 8.80537 3.33819 9.19906 3.71686 9.48116C4.09553 9.76327 4.55309 9.91962 5.02522 9.92823C4.22491 10.5618 3.23288 10.9043 2.21216 10.8993C2.03272 10.8993 1.85327 10.8888 1.67383 10.8677C2.67661 11.5116 3.86938 11.8863 5.14661 11.8863C9.30549 11.8863 11.5908 8.43462 11.5908 5.44212C11.5908 5.34184 11.5908 5.24684 11.5855 5.14656C12.0288 4.8299 12.4088 4.42878 12.7149 3.96962Z' fill='%23212121'/%3E%3C/svg%3E%0A");
            }

            &.linkedin
            {
                /* background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.52301 3.22225C4.52287 3.5022 4.41152 3.77063 4.21347 3.96849C4.01541 4.16634 3.74687 4.27742 3.46692 4.27728C3.18697 4.27714 2.91854 4.1658 2.72069 3.96774C2.52283 3.76969 2.41176 3.50115 2.4119 3.2212C2.41204 2.94125 2.52338 2.67282 2.72143 2.47496C2.91949 2.2771 3.18803 2.16603 3.46798 2.16617C3.74793 2.16631 4.01636 2.27765 4.21422 2.47571C4.41207 2.67376 4.52315 2.9423 4.52301 3.22225ZM4.55467 5.05892H2.44356V11.6667H4.55467V5.05892ZM7.89023 5.05892H5.78967V11.6667H7.86912V8.1992C7.86912 6.26753 10.3866 6.08809 10.3866 8.1992V11.6667H12.4713V7.48142C12.4713 4.22503 8.74523 4.34642 7.86912 5.94559L7.89023 5.05892Z' fill='white'/%3E%3C/svg%3E%0A"); */
                background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.52322 3.22015C4.52308 3.5001 4.41174 3.76853 4.21368 3.96638C4.01563 4.16424 3.74709 4.27531 3.46714 4.27517C3.18719 4.27503 2.91876 4.16369 2.7209 3.96564C2.52305 3.76758 2.41197 3.49904 2.41211 3.21909C2.41225 2.93914 2.52359 2.67071 2.72165 2.47285C2.9197 2.275 3.18824 2.16392 3.46819 2.16406C3.74814 2.1642 4.01657 2.27555 4.21443 2.4736C4.41228 2.67165 4.52336 2.9402 4.52322 3.22015ZM4.55489 5.05681H2.44378V11.6646H4.55489V5.05681ZM7.89044 5.05681H5.78989V11.6646H7.86933V8.19709C7.86933 6.26542 10.3868 6.08598 10.3868 8.19709V11.6646H12.4716V7.47931C12.4716 4.22292 8.74544 4.34431 7.86933 5.94348L7.89044 5.05681Z' fill='%23212121'/%3E%3C/svg%3E%0A");
            }
        }
        
    }
    




    

}
@keyframes scrolling-down
{
    0% {
    transform: translateY(calc(-50% - 10px));
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes scrolling-up
{
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(calc(-50% - 10px));
    }
}

.scroll-icon
{
   
    position: absolute;
    left:-10px;
    right:0px;
    top:0px;
    bottom:150px;
    margin:auto;
   
    width: fit-content;
    height: fit-content;

    
    & svg circle
    {
        animation-name: mouse-movement-anim;
        animation-duration: 4s;
   
        animation-iteration-count: infinite;
        opacity: 0;
    }
    & svg g
    {
        animation: rotate360 10s linear infinite;
      
        transform-origin: center;
        
  
    }
}

@keyframes mouse-movement-anim
{
    0%
    {
        opacity:0;
        
    }
    20%
    {
        opacity:1;
    }
    30%
    {
        opacity:1;
        transform: translateY(0px);
    }
    60%
    {
        opacity:1;
        transform: translateY(-20px);
    }
  

    70%
    {
        opacity:0;
        transform: translateY(-20px);
    }

    80%
    {
        opacity:0;
        transform: translateY(0px);
    }
    100%
    {
        opacity:0;
        transform: translateY(0px);
    }

}
@keyframes rotate360
{
    0%{
        transform: rotate(0deg);
        transition-timing-function: linear;
    }

    100%
    {
        transform: rotate(360deg);
        transition-timing-function: linear;
    }

}


/***** WHO WE ARE *****/
section.who-we-are, section.we-rock
{
    
    background-image: url('/assets/img/home/who-we-are/who-we-are-bg.png');
    background-size: cover;
    background-position: center;
  

    .typewriter-wrapper
    {
        margin-top: 5px;
        transform: rotate(-2deg);
        .typewriter
        {
            width: max-content;
            border: 3px solid transparent;
            border-image: linear-gradient(to right, #1307BC, #79CAFE);
            border-image-slice: 1;
            padding: 10px 15px;
            position: relative;

            .content
            {
            
                position: relative;
                -webkit-text-fill-color: transparent;
                background: linear-gradient(90deg, #1307BC 0%, #1da7fc 90%) text;
                white-space: nowrap;
                animation: 
                            typing 6s steps(20, end) infinite,
                            blink-caret .75s step-end infinite;

            }
    
            &::before
            {
                position: absolute;
                content: "";
                width:4px;
                height: 50px;;
                right: 10px;
                background-color: red;
                animation: blink-caret  .4s step-end infinite;

            }

            span.left
            {
                position: absolute;
                &::before
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    left:-21px;
                    top:-16px;
                    background-color: #1307BC;
                }
                &::after
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    left:-21px;
                    top:54px;
                    background-color: #1307BC;
                }
            }
            span.right
            {
                position: absolute;
                width: 100%;
                &::before
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    right:9px;
                    top:-16px;
                    background-color: #79CAFE;
                }
                &::after
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    right:9px;
                    top:54px;
                    background-color: #79CAFE;
                }
            }
            span.cursor
            {
                position: absolute;
                right:-50px;
                bottom: -50px;
            }

        }
    }

    .laptop
    {
        position: relative;
        left:0px;
        z-index: 1;
    }
    .docs
    {
        position: absolute;
        left:0px;
        top: 0;
    }
    .mobile
    {
        position: absolute;
        left:0px;
        top:0px;
        z-index: 2;
    }
}
@keyframes typing
{
    0%   { width: 0 }
    20%  { width: 370px }
    80%  { width: 370px }
    90% { width: 0} 
    100% { width: 0} 
    
}  
@keyframes typing-experience
{
    0%   { width: 0 }
    20%  { width: 390px }
    80%  { width: 390px }
    90% { width: 0} 
    100% { width: 0} 
    
} 
@keyframes blink-caret
{
    from, to { background-color: transparent }
    50% { background-color: #747474; }
}

section.what-we-do, section.stories
{
  
    div, p
    {
        color: rgb(255, 255, 255);
        /* font-family: "degular_displaylight"; */
    }

    img
    {
        border-radius: 40px;
    }

    .shadow
    {
        position: relative;
        &::before
        {
            content:'';
            position: absolute;
            width:100%;
            height: 100%;
            left: -40%;
            background-image: url('../img/home/what-we-do/shadow.png');
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 0;
        }
        img
        {
            z-index: 1;
            position: relative;
        }

    }
    .shadow.reverse::before
    {
        left: unset;
        right: -40%
    }


    .emoji
    {
        width: calc(100% - 0px);
        height:100%;
        position: absolute;;
        /* border-radius: 40px; */
        overflow: hidden;
        background-image: url('../img/home/what-we-do/emoji.png');
        background-repeat: no-repeat;
        background-position-y: 34%;
        background-position-x: -40px;
        animation: emoji-animation 2s linear infinite;
        z-index: 10;
    }

}

section.what-we-do {
    background-image: url('/assets/img/home/what-we-do/service-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;


    /* & .service-shape {
        position: relative;

        &::before{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg width='80' height='126' viewBox='0 0 80 126' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M74.4349 12.9965C58.1891 9.43786 23.284 8.54048 13.6294 33.4197C1.56115 64.5186 54.0117 113.72 63.2949 114.648C70.7216 115.391 67.0082 108.459 64.2233 104.901C53.8569 90.2024 28.5755 59.7842 10.3803 55.6995C-12.3638 50.5937 13.1653 102.116 15.0219 106.293C15.0219 106.665 18.4258 112.946 20.1277 116.041' stroke='%231D1D1D' stroke-width='2'/%3E%3Ccircle cx='5.56997' cy='5.56997' r='5.56997' transform='matrix(-4.37114e-08 1 1 4.37114e-08 68.4004 7.42676)' fill='url(%23paint0_linear_545_8609)'/%3E%3Ccircle cx='5.56997' cy='5.56997' r='5.56997' transform='matrix(-4.37114e-08 1 1 4.37114e-08 16.416 114.184)' fill='%23D9D9D9'/%3E%3Ccircle cx='5.56997' cy='5.56997' r='5.56997' transform='matrix(-4.37114e-08 1 1 4.37114e-08 16.416 114.184)' fill='url(%23paint1_linear_545_8609)'/%3E%3Ccircle cx='13.9249' cy='13.9249' r='13.9249' transform='matrix(-4.37114e-08 1 1 4.37114e-08 25.2344 0)' fill='%23D9D9D9'/%3E%3Ccircle cx='13.9249' cy='13.9249' r='13.9249' transform='matrix(-4.37114e-08 1 1 4.37114e-08 25.2344 0)' fill='url(%23paint2_linear_545_8609)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_545_8609' x1='-1.09529' y1='2.56909' x2='14.4472' y2='7.67845' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF7B80'/%3E%3Cstop offset='1' stop-color='%23B60CF2'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_545_8609' x1='21.3515' y1='5.1058' x2='4.81905' y2='12.5836' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230A15DB'/%3E%3Cstop offset='1' stop-color='%2320F8FA'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_545_8609' x1='30.6348' y1='13.9249' x2='1.93054' y2='18.7981' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD878'/%3E%3Cstop offset='1' stop-color='%2320F8FA'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
            width: 80px;
            height: 130px;
            position: absolute;
            top: 50px;
            left: 50px;
            background-repeat: no-repeat;
        }
    } */

    & .hh2 {
        color: #1B1B1B;
    }
}

@keyframes emoji-animation 
{
    0%
    {
        background-position-y: 34%;
    }
    100%
    {
        background-position-y: 134%;
    }
    
}



section.cta-1
{
    position: relative;
    background-image: url('../img/home/bg-assistematic.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;

    &::before
    {
        content:'';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        z-index: -1;
        background-image: url('../img/home/bg-cta.png');
        background-repeat: no-repeat;
        background-position: top left;

        
    }
    .cursor
    {
        position: relative;
        
        /* &::before
        {
            position:absolute;
            content:'';
            width: 50px;
            height: 50px;
            background-image: url('../img/home/who-we-are/cursor.png');
            background-repeat: no-repeat;
            right: 34px;
            top: 14px;
            transform-origin: top left;
            animation: cursor-click 4s linear infinite;
        } */
    }
}
@keyframes cursor-click
{   
  
    0%
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1);
    }
    55%
    {
        transform: scale(.5);
    }
    60%
    {
        transform: scale(1);
    }
    100%
    {
        transform: scale(1);
    }
}


/***** RECENT WORK *****/
section.recent-work
{
    background-image: url('../img/home/recent-work/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;

    & .work-shape {
        position: relative;

        &::before{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg width='80' height='126' viewBox='0 0 80 126' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.10615 12.9965C21.3519 9.43786 56.257 8.54048 65.9116 33.4197C77.9799 64.5186 25.5294 113.72 16.2461 114.648C8.81946 115.391 12.5328 108.459 15.3177 104.901C25.6841 90.2024 50.9655 59.7842 69.1607 55.6995C91.9048 50.5937 66.3758 102.116 64.5191 106.293C64.5191 106.665 61.1152 112.946 59.4133 116.041' stroke='%231D1D1D' stroke-width='2'/%3E%3Ccircle cx='5.56968' cy='12.9967' r='5.56997' transform='rotate(90 5.56968 12.9967)' fill='url(%23paint0_linear_545_8785)'/%3E%3Ccircle cx='57.556' cy='119.754' r='5.56997' transform='rotate(90 57.556 119.754)' fill='%23D9D9D9'/%3E%3Ccircle cx='57.556' cy='119.754' r='5.56997' transform='rotate(90 57.556 119.754)' fill='url(%23paint1_linear_545_8785)'/%3E%3Ccircle cx='40.3827' cy='13.9249' r='13.9249' transform='rotate(90 40.3827 13.9249)' fill='%23D9D9D9'/%3E%3Ccircle cx='40.3827' cy='13.9249' r='13.9249' transform='rotate(90 40.3827 13.9249)' fill='url(%23paint2_linear_545_8785)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_545_8785' x1='-1.09558' y1='9.99585' x2='14.4469' y2='15.1052' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF7B80'/%3E%3Cstop offset='1' stop-color='%23B60CF2'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_545_8785' x1='73.3376' y1='119.29' x2='56.8051' y2='126.768' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230A15DB'/%3E%3Cstop offset='1' stop-color='%2320F8FA'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_545_8785' x1='57.0926' y1='13.9249' x2='28.3883' y2='18.7981' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD878'/%3E%3Cstop offset='1' stop-color='%2320F8FA'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
            width: 80px;
            height: 125px;
            position: absolute;
            top: 13px;
            right: 150px;
        }
    }

    .nav
    {
        margin-top:50px;
        margin-bottom: 20px;
        border-radius: 40px;
        padding: 10px 20px;
        background-color: rgba(255, 255, 255, .4);
        border: 3px solid rgba(255, 255, 255, .4);
        justify-content: space-between  ;
        

        .nav-item
        {
            display: flex;
            align-items: center;
           
            .nav-link
            {
                color: #333333;
                border-radius: 100px;
                padding: 10px 25px; 
                font-family: "degular_displaymedium";

                &:hover
                {
                    background-color: #fff;
                }
                &.active
                {
                    position: relative;
                    border-radius: 100px;;
                    color: #fff !important;
                    background-color: rgba(255, 255, 255, .4);
                    z-index: 1;

                    &::before
                    {
                        content: '';
                        position: absolute;
                        border-radius: 100px;
                        width: calc(100% - 4px);
                        height: calc(100% - 4px);
                        left: 2px;
                        top: 2px;
                        z-index: -1;
                        background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 50%, rgba(32, 44, 67, 1) 100%);
                       
                    }
                }
            }
        }
    }

    .logo-portfolio
    {
        border-radius: 20px;
        overflow: hidden;
        /* background-color: #1da7fc; */

        & img 
        {
            width: 100%;;
        }
    }

    .web-portfolio {
        /* width: 376px;
        height: 282px; */
    }

    video
    {
        display: block
    }

}



/***** Success Stories *****/
section.stories
{
    position: relative;
    background-image: url('/assets/img/section-stories/stories-bg.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;

    & .assistametic-shape {
        position: absolute;
        top: 0;
        right: 0;
        mix-blend-mode: overlay;
    }

    .swiper-slide img{
        width: auto;
    }

    .story-1, .story-2
    {

        border-radius: 20px;
        padding: 30px ;
        background: radial-gradient(circle at top right,rgba(65, 187, 225, 1) 0%, rgba(146, 72, 185, 1) 66%, rgba(32, 44, 67, 1) 100%);
        text-align: left;
        p
        {
            color: #fff;
        } 
    }
    .story-2
    {
        color: #000;
        background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(153, 153, 153, 1) 100%);
        p
        {
            color: #000;
        } 
    }
    a
    {
        transition: all .3s;
        background-color: #fff;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-family: "degular_displaysemibold";
        padding: 10px 15px;
        border-radius: 100px;
        display: inline-block;

        &:hover, &:active
        {
            color: #fff;
            background-color: rgba(51, 51, 51, 1);
        }
    }


}



/***** We Rock *****/
section.we-rock
{
    background-image: url('/assets/img/home/success-stories/2.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto;

    .typewriter-wrapper
    {
        & .typewriter
        {

            .content
            {
                animation: 
                            typing-experience 5s steps(20, end) infinite,
                            blink-caret .75s step-end infinite;

            }
        }
    }

    .t-shirt
    {
        transition: all .4s;
        position: absolute;
        left: 0px;
        top: 0;
        z-index: 1;

        

    }
    .col-lg-6:nth-child(2):hover
    {
        .t-shirt
        {   
            transform: scale(1.15) ;
        }
    }
} 

/***** FAQ *****/
section.faq
{
    /* background-image: url('/assets/img/faqs-bg.png'); */
    background-image: url('/assets/img/home/faqs-bg.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;

    .accordion .accordion-item
    {
        /* transition: all .4s; */
        border-radius: 15px;
        background: transparent;
        border:1px solid #3333331A;
        margin-bottom: 20px;
        position: relative;
        backdrop-filter: blur(10px);

        &::before
        {
            content:'';
            position: absolute;
            border-radius: 15px;
            overflow: hidden;
            width: 100%;
            height: 100%;
            opacity: 0;
            /* background: radial-gradient(circle at top left,rgba(0, 163, 197, 1) 0%, rgba(135, 88, 168, 1) 33%, rgba(11, 25, 113, 1) 85%, rgba(234, 96, 46, 1) 100%); */
            background-color: #ffffff;
            transition: all .5s linear;
        }
    }
    
    .accordion .accordion-button
    {
        font-family: "degular_displaysemibold";
        font-size: 24px;
        color: #333333;
        padding: 20px 40px;
        box-shadow: none;
        background-color: transparent;
        transition: all .5s linear;

        &::after {
            width: 25px;
            height: 25px;
            background-image: url(/assets/img/faq-icon-1.png);
        }

        &:not(.collapsed){
            color: #000000;

            &::after{
                background-image: url('/assets/img/faq-icon-2.png');
                width: 25px;
                height: 25px;
                transform: rotate(0deg);
            }
        }
    
    }
    .accordion-body
    {
        font-size: 18px;
        border-top: 1px solid #17171733;
        margin-inline:  40px;
        padding-inline: 0px;
        position: relative;
        color: #fff;
        transition: all .5s linear;
    }

    .accordion-button:not(.collapsed)
    {
        background-color: transparent; 
    }
    button:focus:not(:focus-visible)
    {
        outline: 0;
    }


    .accordion-item:has(.accordion-collapse.show)
    {
        &::before
        {
            opacity: 1;
        }

        .accordion-body {
            color: #000000;
        }
    } 

  
}
@keyframes bgGredientTransition
{
    0%
    {
        background: radial-gradient(circle at top left,rgb(178, 232, 0) 0%, rgba(135, 88, 168, 1) 33%, rgba(11, 25, 113, 1) 75%, rgba(234, 96, 46, 1) 100%);
    }
    100%
    {
        background: radial-gradient(circle at top left,rgba(0, 163, 197, 1) 0%, rgba(135, 88, 168, 1) 33%, rgba(11, 25, 113, 1) 75%, rgba(234, 96, 46, 1) 100%);
    }
}


/***** Start Project *****/

.start-project{

    .input-group {

        & .form-control {
            color: #676767;
            font-size: 17px;
            background: #F1F1F1;
            border-radius: 130px;
            border: none;
            padding: 18px 25px;
            margin-bottom: 30px;
    
            &:focus {
                box-shadow: none;
            }
        }
    }

    & .btn-submit {
        height: 60px;
        width: 100%;

        & .wrapper {
            height: 60px;
            padding: 15px 25px 18px;
        }
    }

}

/***** Testimonials *****/
.client-reviews {
    
    & .review-box {
        border: 1px solid #0000001A;
        border-radius: 10px;
        padding: 40px;

        & .title {
            font-size: 20px;
            font-weight: 600;
            color: #000;
            line-height: 1;
            position: relative;
            padding-left: 15px;
            margin-bottom: 24px;

            &::before{
                content: '';
                width: 5px;
                height: 100%;
                background: linear-gradient(110deg, rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
                position: absolute;
                left: 0;
            }
        }

        & .image {
            margin-bottom: 24px;
        }

        & .rating {
            font-size: 90px;
            font-weight: bold;
            color: #000000;
            line-height: 1;
            margin-bottom: 15px;
        }

        & .total-reviews {
            font-size: 20px;
            font-weight: 400;
            color: #333333;
        }
    }

    & .testimonial-box {

        & .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 20px;
        }

        & .desc {
            font-size: 30px;
            font-weight: 600;
            color: #323232;
            margin-bottom: 20px;
            text-align: left;
        }

        & .author {
            display: flex;
            align-items: center;
            gap: 20px;
            text-align: left;

            .author-name {
                font-size: 20px;
                font-weight: 600;
                color: #323232;
            }

            .author-designation {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
            }
        }
    }
}


.thank-you {
    background-image: url(/assets/img/bg-thank-you-hero.jpg);
    background-size: cover;
    padding: 200px 0;

    & .sub-title {
        font-size: 40px;
    }

    .hh2 {
        line-height: 1;
    }

    p {
        font-size: 24px;
        color: white;
    }

    a {
        font-size: 24px;
        color: white;
    }
}

/***** COMMON *****/
.slug
{
    border:1px solid #00000033;
    background-color: #fff;;
    color: #000 !important;
    border-radius: 100px;
    width: fit-content;
    padding: 5px 15px 4px 10px;
    font-size: 18px;
    margin-bottom: 30px;
}
.pill
{
    border:1px solid #343434;
    padding: 9px 18px;
    width: fit-content;
    border-radius: 150px;
    font-size: 16px;
    color: rgba(255, 255, 255, 1) !important;

}

.shape-one {
    position: absolute;
    top: 80px;
    right: 0;
}

.shape-rotate {
    position: absolute;
    bottom: -150px;
    left: -150px;
    z-index: 1;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(30deg); }
    100% { transform: rotate(0deg);} 
}

.shape-two {
    position: absolute;
    top: -150px;
    left: 0;
}

.shape-three {
    position: absolute;
    top: -80px;
    left: 0;
}



/* Website Design Page */

.web-portfolio .video-wrapper
{
    width:100%;
    aspect-ratio: 16/8.8;
    border-radius: 20px;
    overflow: hidden;

}


/* Common */
.btn-secondary
{
    display: flex;
    transition: all .5s;
    width: fit-content;   
    background: #0171FF;
    border-radius: 100px;
    position: relative;
    text-align: center;
    height: 50px;;
    
    box-sizing: border-box;
    color:#fff;

    &::before {
        border-radius: 100px;
        content: '';
        /* background-image: linear-gradient(to bottom, #81b8fd 0%, #81b8fd 100%); */
        background-color: #4E9DFF;
        top: -2px;
        left: -2px;
        bottom: -2px;
        right: -2px;
        position: absolute;
        z-index: -1;

    }

    div.wrapper
    {
        border-radius: 100px;
        height: 50px;
        width:100%;
        padding: 10px 25px;
        overflow: hidden;
        position: relative;
        
        & div
        {
            transition:all .4s;
            color: #fff;
            z-index: 3;

            svg
            {
                margin-left:10px;
            }
        }

        div.btn-content
        {
            position: relative;
            margin-top: 3px;
            z-index: 10 !important;
        }

        div:nth-child(2)
        {
            font-weight: 600;
            margin-top:30px;
            background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;

        }

        span
        {
            position: absolute;
            width: 0;
            height: 0;
            bottom:0px;
            border-radius: 50%;
            background-color: #fff;
            transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
            transform: translate(-50%,50%);
            z-index: 0;
        }
    }

    
}

.btn-secondary:hover
{
    div.wrapper 
    {
        padding: 8px 25px 10px;

        span
        {
            width: 500px;
            height: 500px;
        }
        div.btn-content
        {
            transition:all .4s;
            transform: translateY(-55px);
            
        }
    }

 
}

.btn-live-chat-1
{
    display: flex;
    transition: all .5s;
    width: fit-content;   
    background-color: #fff;
    border-radius: 100px;
    position: relative;
    text-align: center;
    height: 50px;;
    
    box-sizing: border-box;
    color:#fff;

    &::before {
        border-radius: 100px;
        content: '';
        background-image: linear-gradient(to bottom, #81b8fd 0%, #81b8fd 100%);
        top: -2px;
        left: -2px;
        bottom: -2px;
        right: -2px;
        position: absolute;
        z-index: -1;

    }

    div.wrapper
    {
        border-radius: 100px;
        height: 50px;
        width:100%;
        padding: 10px 25px;
        overflow: hidden;
        position: relative;
        
        & div
        {
            transition:all .4s;
            color: #fff;
            z-index: 3;

            svg
            {
                margin-left:10px;
            }
        }

        div.btn-content
        {
            position: relative;
            margin-top: 3px;
            z-index: 10 !important;

            div:nth-child(1)
            {
                font-weight: 600;
                background: linear-gradient(135deg,rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            div:nth-child(2)
            {
                margin-top:30px;
            }
        }

      
        span
        {
            position: absolute;
            width: 0;
            height: 0;
            bottom:0px;
            border-radius: 50%;
            background: #0171FF;
            transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
            transform: translate(-50%,50%);
            z-index: 0;
        }
    }

    
}

.btn-live-chat-1:hover
{
    div.wrapper 
    {
        span
        {
            width: 500px;
            height: 500px;
        }
        div.btn-content
        {
            transition:all .4s;
            transform: translateY(-55px);
            
        }
    }
}

.sub-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    line-height: 1;
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;

    &::before{
        content: '';
        width: 5px;
        height: 100%;
        background: linear-gradient(110deg, rgba(78, 157, 255, 1) 0%, rgba(20, 99, 197, 1) 40%, rgba(32, 44, 67, 1) 100%);
        position: absolute;
        left: 0;
    }
}

.title {
    font-size: 60px;
    font-weight: 600;
    line-height: 1em;
    color: #1B1B1B;
}

.fire-slug {
    background-color: #fff;
    color: #343434;
    border-radius: 100px;
    width: fit-content;
    padding: 7px 15px 6px;
    font-size: 16px;
    margin-bottom: 20px;
    height: 37px;
}

.dark-slug {
    background-color: transparent;
    color: #ffffff !important;
    border: 1px solid #FFFFFF33;
    margin-bottom: 20px;
}



.hero-banner
{
    background-image: url('/assets/img/services/website-design/banner-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-top: 190px;

    .marque-wrapper .marque-loop 
    {
        animation: fixed-loop-anim 20s linear infinite;
    } 

    .social-icons {
        position: absolute;
        right: 70px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
    }

    
}

.marque-wrapper {
    overflow: hidden;

    & .marque-loop {
        display: inline-flex;   
        animation: fixed-loop-anim 20s linear infinite;

        & .marque-container {
            display: flex;
            gap: 15px;
            margin-right: 15px;

            & .marque-item img{
                border-radius: 12px;
                max-width: fit-content;
            }
        }
    }
}

@keyframes fixed-loop-anim {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-33.32%);
    }
}

.process {
    /* background-image: url('/assets/img/services/website-design/process-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */

    & .process-wrapper {
        height: 470px;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        & .process-item {
            display: flex;
            gap: 15px;
            border-bottom: 1px solid #BBBBBB;
            padding-bottom: 10px;
            margin-bottom: 15px;

            .serial {
                font-size: 30px;
                font-weight: 600;
                color: #333333;
            }

            .content {
                
                h3 {
                    font-size: 30px;
                    font-weight: 600;
                    color: #333333;
                }

                p {
                    font-size: 16px;
                    font-weight: 500;
                    color: #666666;
                    font-family: "degular_displaymedium"
                }

            }
        }
    }
}

.why-choose {

    & .col-lg-4 {
        padding: 0 10px;
        margin-bottom: 20px;
    }

    & .why-box {
        background-color: #fff;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 74px 0 #00000012;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 250px;

        h3 {
            font-size: 28px;
            font-weight: 600;
            color: #0F0F0F;
            line-height: 1;
            margin-bottom: 0;
            text-wrap-style: balance;
        }

        p {
            font-size: 16px;
            color: #666666;
            margin-bottom: 0;
            font-family: "degular_displaymedium"
        }
    }

    & .swiper-slide {
        height: auto;

        img {
            width: auto;
        }
    }

    & .swiper-pagination {
        position: unset;
        margin-top: 30px;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;

        .swiper-pagination-bullet {
            height: 13px;
            width: 13px;
            color: #EEEEEE;
        }

        .swiper-pagination-bullet.swiper-pagination-bullet-active {
            width: 17px;
            height: 17px;
            color: #4E9DFF;
            border: 2px solid #4E9DFF2B;
        }
    }

    & .why-us-box {
        text-align: left;
        border-radius: 15px;
        border: 1px solid rgba(78, 157, 255, 0.37);
        background: linear-gradient(180deg, rgba(78, 157, 255, 0.00) 0%, rgba(78, 157, 255, 0.09) 100%);
        padding: 50px 30px;
        height: 100%;

        & .img {
            margin-bottom: 20px;
        }

        h3 {
            font-size: 30px;
            font-weight: 600;
            color: #333333;
            line-height: 1;
            margin-bottom: 20px;
        }

        p {
            font-size: 18px;
            color: #333333;
            margin-bottom: 0px;
            letter-spacing: 0px;
        }
    }
}

.web-reviews {
    background-image: url('/assets/img/services/website-design/testimonial-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.portfolio {
    background-image: url('/assets/img/services/website-design/portfolio-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;

    .nav {
        border: 2px solid #FFFFFF66;
        margin-top: 50px;
        margin-bottom: 20px;
        border-radius: 40px;
        padding: 10px 20px;
        background-color: rgba(255, 255, 255, 0.5);
        justify-content: space-between;

        .nav-item {

            .nav-link{
                font-size: 14px;
                font-weight: 500;
                color: #333333;
                border-radius: 100px;
                padding: 10px 15px;
                transition: all .5s;

                &:hover
                {
                    background-color: #fff;
                }

                &.active
                {
                    position: relative;
                    border-radius: 100px;
                    color: #fff !important;
                    background-color: #FFFFFF66;
                    z-index: 1;

                    &::before
                    {
                        content: '';
                        position: absolute;
                        border-radius: 100px;
                        width: calc(100% - 4px);
                        height: calc(100% - 4px);
                        left: 2px;
                        top: 2px;
                        z-index: -1;
                        background: #0171FF;
                       
                    }
                }
            }
        }
    }

    .web-portfolio img {
        border-radius: 20px;
    }
}

.packages {

    .nav {
        border: 2px solid #f6f6f6;
        margin-top: 50px;
        margin-bottom: 20px;
        border-radius: 40px;
        padding: 10px 20px;
        /* background-color: rgba(255, 255, 255, 0.5); */
        justify-content: space-between;

        .nav-item {

            .nav-link{
                font-size: 14px;
                font-weight: 500;
                color: #333333;
                border-radius: 100px;
                padding: 10px 15px;
                transition: all .5s;

                &:hover
                {
                    background-color: #fff;
                }

                &.active
                {
                    position: relative;
                    border-radius: 100px;
                    color: #fff !important;
                    background-color: #FFFFFF66;
                    z-index: 1;

                    &::before
                    {
                        content: '';
                        position: absolute;
                        border-radius: 100px;
                        width: calc(100% - 4px);
                        height: calc(100% - 4px);
                        left: 2px;
                        top: 2px;
                        z-index: -1;
                        background: #0171FF;
                       
                    }
                }
            }
        }
    }

    .web-portfolio img {
        border-radius: 20px;
    }
}

.package-box {
    background-color: #F9F9F9;
    border: 1px solid #E1E1E1;
    border-radius: 15px;
    padding: 32px 24px;

    .head {
        margin-bottom: 15px;

        .name {
            font-size: 24px;
            font-weight: 600;
            color: #333333;
        }

        .price {
            font-size: 28px;
            font-weight: 600;
            color: #0171FF;
            position: relative;

            sub {
                font-size: 16px;
                font-weight: 400;
                bottom: 0;
                color: #999999;
            }

            sup {
                color: #97909C;
                font-size: 8px;
                font-style: normal;
                font-weight: 400;
                letter-spacing: 0.157px;
                text-transform: capitalize;
                top: 2px;
                position: absolute;
                right: 45px;
            }

            .dollar {
                font-size: 28px;
                color: #181818;
            }

            .cut-price {
                font-size: 16px;
                color: #97909C;
                font-weight: 400;
                text-decoration: line-through;
            }
        }

        p {
            font-size: 16px;
            color: #808080;
            margin-bottom: 0;
            letter-spacing: 0.20px;
        }
    }

    .body {
        background-color: #ffffff;
        border-radius: 22px;
        padding: 17px 18px;        
        margin-bottom: 15px;

        ul {
            height: 220px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                display: none;
            }

            li {
                display: inline-flex;
                align-items: flex-start;
                gap: 8px;
                width: 100%;

                .icon {
                    line-height: 0.9;
                }
    
                .points {
                    font-size: 16px;
                    color: #181818;
                }
            }
        }
    }

    .foot {

        .ques {
            font-size: 14px;
            line-height: 26px;
            color: #333333;

            a {
                font-size: 16px;
                font-weight: 600;
                color: #333333;
            }
        }

        .divider {
            width: 1px;
            height: 56px;
            background-color: #CACACA;
            opacity: 40%;
        }
    }
}

.recommended {
    position: relative;
    border-radius: 13px;

    &::before {
        content: 'Recommended';
        background-color: #0171FF;
        color: #ffffff;
        height: calc(100% + 45px);
        width: calc(100% + 8px);
        position: absolute;
        bottom: -4px;
        left: -4px;
        padding: 8px 24px;
        border-radius: 15px;
        z-index: -1;
    }
}

.cta {
    background-image: url('/assets/img/services/website-design/cta-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .typewriter-wrapper
    {
        margin-top: 5px;
        transform: rotate(-2deg);
        .typewriter
        {
            width: max-content;
            border: 3px solid transparent;
            border-image: linear-gradient(to right, #1307BC, #79CAFE);
            border-image-slice: 1;
            padding: 10px 15px;
            position: relative;

            .content
            {
            
                position: relative;
                -webkit-text-fill-color: transparent;
                background: linear-gradient(90deg, #1307BC 0%, #1da7fc 90%) text;
                white-space: nowrap;
                animation: 
                            typing-2 6s steps(20, end) infinite,
                            blink-caret .75s step-end infinite;

            }
    
            &::before
            {
                position: absolute;
                content: "";
                width:4px;
                height: 50px;;
                right: 10px;
                background-color: red;
                animation: blink-caret .4s step-end infinite;

            }

            span.left
            {
                position: absolute;
                &::before
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    left:-21px;
                    top:-16px;
                    background-color: #1307BC;
                }
                &::after
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    left:-21px;
                    top:54px;
                    background-color: #1307BC;
                }
            }
            span.right
            {
                position: absolute;
                width: 100%;
                &::before
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    right:9px;
                    top:-16px;
                    background-color: #79CAFE;
                }
                &::after
                {
                    content: '';
                    width: 10px;
                    height:10px;
                    position: absolute;
                    right:9px;
                    top:54px;
                    background-color: #79CAFE;
                }
            }
            span.cursor
            {
                position: absolute;
                right:-50px;
                bottom: -50px;
            }

        }
    }

    .laptop
    {
        position: absolute;
        left:0px;
        z-index: 1;
    }
    .docs
    {
        position: absolute;
        left:0px;
    }
    .mobile
    {
        position: absolute;
        left:0px;
        top:0px;
        z-index: 2;
    }

    .t-shirt
    {
        transition: all .4s;
        position: absolute;
        left: 0px;
        z-index: 1;

        

    }
    .col-lg-6:nth-child(2):hover
    {
        .t-shirt
        {   
            transform: scale(1.15) ;
        }
    }
}

@keyframes typing-2
{
    0%   { width: 0 }
    20%  { width: 350px }
    80%  { width: 350px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.web-services {
    background-image: url('/assets/img/services/website-design/web-services-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0;

    & .pill.active {
        background-color: #0171FF;
    }

    .more {
        height: 58px;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }
    }
}

.service-box-wrapper {
    height: 760px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-padding-top: 140px;

    &::-webkit-scrollbar {
        display: none;
    }

    .service-box {
        background-color: #FFFFFF0A;
        border: 3px solid #FFFFFF0A;
        border-radius: 14px;
        padding: 30px 20px;
        max-width: 454px;
        margin: 40px auto 0;

        &:last-child {
            margin-bottom: 110px;
        }
    
        .number {
            font-size: 70px;
            font-weight: 600;
            line-height: 0.7;
            color: #ffffff;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    
        h3 {
            font-size: 30px;
            font-weight: 600;
            color: #ffffff;
        }
    }
}

.process {
    transition: all .5s ease;

    &:hover {

        .path-1 {
            /* transform: translateX(-50px); */
            animation: path-1 5s linear infinite;
        }

        .path-2 {
            /* transform: translateX(-100px); */
            animation: path-2 5s linear infinite;
        }

        .path-3 {
            /* transform: translateX(-150px); */
            animation: path-3 5s linear infinite;
        }
    }
}

@keyframes path-1 {
    100%{transform: translateX(-50px);}
}

@keyframes path-2 {
    100%{transform: translateX(-100px);}
}

@keyframes path-3 {
    100%{transform: translateX(-150px);}
}

@keyframes typing-logo
{
    0%   { width: 0 }
    20%  { width: 315px }
    80%  { width: 315px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.logo-cta {
    & .typewriter-wrapper {
        & .typewriter {
            .content {
                animation: typing-logo 6s steps(20, end) infinite, blink-caret .75s step-end infinite;
            }
        }
    }
}

@keyframes typing-smm
{
    0%   { width: 0 }
    20%  { width: 370px }
    80%  { width: 370px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.smm-cta {
    & .typewriter-wrapper {
        & .typewriter {
            .content {
                animation: typing-smm 6s steps(20, end) infinite, blink-caret .75s step-end infinite;
            }
        }
    }
}

.portfolio-shape {
    position: absolute;
    top: 200px;
    right: 330px;
}


.hero-logo {
    padding-bottom: 150px;

    .marque-wrapper .marque-loop 
    {
        animation: fixed-loop-anim 40s linear infinite;
    }

}

.banner-animated-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    & .main-gif {
        position: absolute;

        img {
            border-radius: 39px;
        }
    }

    & .layer-1 {
        position: absolute;
        top: -30px;
        left: 80px;
    }

    & .layer-2 {
        position: absolute;
        bottom: 0;
        left: 120px;
    }

    & .layer-3 {
        position: absolute;
        top: -25px;
        right: 80px;

        img {
            border-radius: 29px;
        }
    }

    & .layer-4 {
        position: absolute;
        bottom: -60px;
        right: 60px;
        z-index: -1;

        img {
            border-radius: 32px;
        }
    }
}

.hero-smm {
    padding-bottom: 40px;
}

.main-nav li
{
    cursor: pointer;
}

.dropdown
{
    position: relative;
}

.dropdown:hover 
{

    & a.main
    {
        font-weight: 700;
        opacity: 1;
    }

    & a {
        color: #000;
        
    }

    & .menu-dropdown {
        opacity: 1;
        height: auto;
        display: block;
    }
}


.menu-dropdown {
    position: absolute;
    top: 25px;
    width: max-content;
    left: 0px;
    opacity: 0;
    transition: all 0.5s;
    height: 0;
    display: none;
    z-index: 11;

    & .ul {
        display: block !important;
        padding: 22px 24px 14px 22px;
        background-color: #ffffff;
        border: 1px solid #408FF11A;
        border-radius: 20px;
        margin-top: 10px;

        & .li {
            transition: all .5s;
            padding: 5px 0px;
            border-bottom: 1px solid #3D3D3D26;

            &:first-child {
                padding-top: 0;
            }

            & .a {
                font-size: 16px;
                color: #5A5A5A;
                opacity: 1;
                /* transition: all .5s; */
            }

            &:hover {
                /* background-color: #ffffff;
                border-radius: 50px;
                color: #000; */

                .a {
                    color: #000;
                }
            }
        }

        & .li:last-child
        {
            border:0px;
        }
    }
}

/* About Page */

.about-assistematic-design {
    background-image: url('/assets/img/about/bg-1.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: cover;
}

.mission {
    background-image: url('/assets/img/about/bg-5.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
}

.values {
    /* background-image: url('/assets/img/about/bg-3.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover; */

    & .value-box {
        color: #ffffff;
        border: 2px solid #FFFFFF0A;
        border-radius: 14px;
        padding: 50px 30px;
        margin-bottom: 30px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(153, 153, 153, 0.14) 100%);
        backdrop-filter: blur(4.5px);

        .icon {
            margin-bottom: 15px;
        }

        h3 {
            font-size: 24px;
            font-weight: 600;
        }

        p {
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 0;
        }
    }
}

.locations{
    background-image: url('/assets/img/about/bg-4.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;

    & .location-box {
        background-color: #ffffff;
        border-radius: 14px;
        border: 2px solid #FFFFFF0A;
        padding: 48px 20px 24px;
        margin-bottom: 20px;

        .name {
            color: #000;
            font-size: 30px;
            font-weight: 600;
        }

        .icon {
            line-height: 1;
        }

        h4 {
            color: #000;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 0;
            line-height: 1.4;
        }

        p {
            color: #151515;
            font-size: 14px;
            margin-bottom: 8px;
            letter-spacing: 0.28px;
        }

        .image img {
            width: 100%;
        }
    }

    & .highlight {
        padding-top: 28px;
        border: 1px solid #4E9DFF;
    }
}

@keyframes typing-about-cta
{
    0%   { width: 0 }
    20%  { width: 340px }
    80%  { width: 340px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.about-cta {
    & .typewriter-wrapper {
        & .typewriter {
            .content {
                animation: typing-about-cta 6s steps(20, end) infinite, blink-caret .75s step-end infinite;
            }
        }
    }
}


/* Contact Page */

.contact-hero-banner
{
    background-image: url('/assets/img/contact/banner-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
    padding-top: 190px;

    .marque-wrapper .marque-loop 
    {
        animation: fixed-loop-anim 20s linear infinite;
    } 

    .social-icons {
        position: absolute;
        right: 70px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
    }

    
}

.main-contact-form {
    background-image: url('/assets/img/contact/form-bg-1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    & .contact-info-shape {
        padding-left: 80px;
        position: relative;

        &::before{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg width='80' height='126' viewBox='0 0 80 126' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.10615 12.9965C21.3519 9.43786 56.257 8.54048 65.9116 33.4197C77.9799 64.5186 25.5294 113.72 16.2461 114.648C8.81946 115.391 12.5328 108.459 15.3177 104.901C25.6841 90.2024 50.9655 59.7842 69.1607 55.6995C91.9048 50.5937 66.3758 102.116 64.5191 106.293C64.5191 106.665 61.1152 112.946 59.4133 116.041' stroke='%231D1D1D' stroke-width='2'/%3E%3Ccircle cx='5.56968' cy='12.9967' r='5.56997' transform='rotate(90 5.56968 12.9967)' fill='url(%23paint0_linear_545_8785)'/%3E%3Ccircle cx='57.556' cy='119.754' r='5.56997' transform='rotate(90 57.556 119.754)' fill='%23D9D9D9'/%3E%3Ccircle cx='57.556' cy='119.754' r='5.56997' transform='rotate(90 57.556 119.754)' fill='url(%23paint1_linear_545_8785)'/%3E%3Ccircle cx='40.3827' cy='13.9249' r='13.9249' transform='rotate(90 40.3827 13.9249)' fill='%23D9D9D9'/%3E%3Ccircle cx='40.3827' cy='13.9249' r='13.9249' transform='rotate(90 40.3827 13.9249)' fill='url(%23paint2_linear_545_8785)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_545_8785' x1='-1.09558' y1='9.99585' x2='14.4469' y2='15.1052' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF7B80'/%3E%3Cstop offset='1' stop-color='%23B60CF2'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_545_8785' x1='73.3376' y1='119.29' x2='56.8051' y2='126.768' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230A15DB'/%3E%3Cstop offset='1' stop-color='%2320F8FA'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_545_8785' x1='57.0926' y1='13.9249' x2='28.3883' y2='18.7981' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD878'/%3E%3Cstop offset='1' stop-color='%2320F8FA'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
            width: 80px;
            height: 125px;
            position: absolute;
            top: -60px;
            right: -10px;
        }

        & a {
            font-size: 24px;
            color: #333333;
        }
    
        & .divider {
            width: 100%;
            height: 1px;
            background-color: #0000001A;
            margin: 20px 0;
        }
    
        & h5 {
            font-size: 12px;
            color: #000000;
            letter-spacing: 0;
        }
    }

    & .form-label {
        margin-bottom: 3px;
    
        span {
            font-size: 14px;
            letter-spacing: 0;
            color: #333333;
        }
    }

    & .form-control {
        border-radius: 10px;
        background-color: #ffffff;
        border: 1px solid #C9C9C9;
        font-size: 14px;
        letter-spacing: 0;
        color: #333333;
        padding: 13px 15px;
        margin-bottom: 10px;

        &:focus {
            box-shadow: none;
        }
    }
}


/* Facebook Management Page */

@keyframes typing-fms
{
    0%   { width: 0 }
    20%  { width: 530px }
    80%  { width: 530px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.fms-cta {
    & .hh4 {
        letter-spacing: 0;
    }

    & .typewriter-wrapper {
        & .typewriter {
            .content {
                animation: typing-fms 6s steps(20, end) infinite, blink-caret .75s step-end infinite;
            }
        }
    }
}


/* Digital Marketing Page */

@keyframes typing-dm
{
    0%   { width: 0 }
    20%  { width: 255px }
    80%  { width: 255px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.dm-cta {
    & .hh4 {
        letter-spacing: 0;
    }

    & .typewriter-wrapper {
        & .typewriter {
            .content {
                animation: typing-dm 6s steps(20, end) infinite, blink-caret .75s step-end infinite;
            }
        }
    }
}

.why-does {
    background-image: url('/assets/img/services/digital-marketing/why-does-bg-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    .why-does-box {
        padding: 25px;
        min-height: 313px;
        color: #333333;
        border-radius: 14px;
        border: 2px solid #FFF;
        background: rgba(255, 255, 255, 0.15);
        margin-bottom: 30px;
        

        .icon {
            margin-bottom: 15px;
        }

        h3 {
            font-size: 24px;
            font-weight: 600;
        }

        p {
            font-size: 16px;
            color: #333333;
            margin-bottom: 0;
        }
    }
}


/* SEO Service Page */
@keyframes typing-seo
{
    0%   { width: 0 }
    20%  { width: 465px }
    80%  { width: 465px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.seo-cta {
    & .typewriter-wrapper {
        & .typewriter {
            .content {
                animation: typing-seo 6s steps(20, end) infinite, blink-caret .75s step-end infinite;
            }
        }
    }
}

/* service section */
.accordion-services
{
    & .accordion-item
    {
        border-radius: 15px !important;
        background-color: transparent;
        border: 2px solid #ffffff;
        margin-bottom: 15px;
        position:relative;

        &::after {
            content:'';
            position: absolute;
            width: 3px;
            height: 0;
            background-color: #DADAE566;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

        &::before
        {
            content:'';
            transition:all .4s;
            position:absolute;
            width:3px;
            height:0px;
            background-color: #0171FF;
            right: 20px;
            top: 20px;
            /* transform: translateY(-50%); */
            z-index: 1;
        }

        &.active::before
        {
            animation-name: service-border-animation;
            animation-duration: 4.5s;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }

        &:last-child
        {
            margin-bottom: 0px !important;
        }
        
    }

    & .accordion-item.active {
        &::after {
            height: calc(100% - 40px);
        }
    }

    & .accordion-button 
    {
        font-size: 25px;
        font-weight: 700;
        background-color: transparent;

        &::after
        {
            border:0px !important;
            opacity: 0;
        }

        &:focus, &:active
        {
            box-shadow: none;
        }
    }

    & .accordion-button:not(.collapsed)
    {
        background-color: transparent;
        box-shadow:none;
        color:#000;
    }

    & .accordion-body
    {
        padding-top: 0px;
        padding-right: 50px;

        p {
            font-size: 15px;
            font-weight: 500; 
            color: #333333;
            letter-spacing: 0px;
            font-family: "degular_displaysemibold";
        }

        .pill {
            color: #333333 !important;
            border: 1px solid #3434341A;
            font-size: 13px;
            letter-spacing: 0px;
        }
    }
}

@keyframes service-border-animation {
    0%
    {   height:0px; }
    100%
    {   height: calc(100% - 40px); }
    
}

.services-image-wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    
    img
    {
        transition: all .4s;
        opacity: 0;
        border-radius: 0 !important;
    }

    &.active
    {
        img
        {
            opacity: 1;
        }
        
    }
}


/* Digital Marketing for healthcare Page */

@keyframes typing-dmh
{
    0%   { width: 0 }
    20%  { width: 330px }
    80%  { width: 330px }
    90% { width: 0} 
    100% { width: 0} 
    
}

.dmh-cta {
    & .hh4 {
        letter-spacing: 0;
    }

    & .typewriter-wrapper {
        & .typewriter {
            .content {
                animation: typing-dmh 6s steps(20, end) infinite, blink-caret .75s step-end infinite;
            }
        }
    }
}