*
{
    font-family: 'GeneralSans-Regular';
}

html {
    scroll-padding-top: 110px !important;
    scroll-behavior: smooth;
 }

body
{
    color:#fff;
    font-family: 'GeneralSans-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: .4px;
    background-color: #ffffff;
    overflow-x: hidden;
}

ul
{
    padding:0px;
    margin: 0px;;
}

header
{
    /* padding: 20px 40px !important; */
    /* padding: 29px 29px 29px 40px !important; */
    background-color: #121314 ;
   
  
}

.text-wrap-balance
{
    text-wrap: balance;
}

.text-wrap-pretty
{
    text-wrap-style: pretty;
}

header ul 
{
    position: relative;
}
header ul li 
{
    padding:0px !important;
    /* border:2px solid #121314; */
    transition: all .5s;
    margin: 8px 16px;
}
header ul li:last-child
{
    /* padding-right: 25px !important; */
    padding-top:10px;
    
}
header ul li:after
{
    background-color: unset;
    /*
    content:"";
    position: absolute;
    top:20px;
    right:10px;
    border:1px solid #43464a;
    height: 16px;
    */
  
}
header ul li:hover
{
    transition: all .5s;
}
header ul li.no-hover:hover
{
    background-color: transparent;
    border:2px solid #000 !important;
}
header .btn-default i
{
    margin-left:10px;
}
main{
    margin-top:-2px;
    overflow: hidden;
}
section
{  
    padding-bottom: 80px;
    padding-top: 80px;
}
header .btn-default
{
    overflow: hidden;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: .4px;
    
    color:#000;
    border-radius: 80px;
    padding: 2px 24px;
    background-color: #EEC643;

   

}

.btn-default div 
{
    position: relative;
    z-index: 11;
    text-align: center;
}

.btn-default span
{
    position: absolute;
    width:0px;
    height: 0px;
    border-radius:100%;
    background-color: #fff;   
    transition: all .5s;
    transform: translate(-50%, -50%);
    z-index: 1;
}


.btn-default:hover span
{
    transition: all .8s;
    width:2000px;
    height: 2000px;  
 
   
   
}

header .btn-default:hover
{
   
    color:#000;
   


}

.container
{
    max-width: 1600px;
    position: relative;
    transition: all 0.5s;
}

.width-1200 {
    max-width: 1200px;
}

section.hero
{
    color: #fff;
    background-image: url('/assets/img/new-hero-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    min-height:800px;
    display: flex;
    align-items: center;
    position: relative;
}

.hero .sub-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
}

.hero .title {
    font-size: 80px;
    font-weight: 500;
    line-height: 100px;
    letter-spacing: .4px;
    margin-bottom: 60px;
}

.insta-banner {
    position: absolute;
    top: 0;
    right: 0;
}

.insta-banner img {
    transition: all 0.3s ease;
}

.insta-banner:hover img {
    transform:translate(-18px, 28px) scale(1.2);
}

.title
{

    font-size: 60px;
    font-weight: 500;
    line-height: 70px;
    letter-spacing: .4px;
}

.sub-title
{
    font-size: 40px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -0.05em;
} 

.sub-title-2
{
    font-size: 48px;
    font-weight: 400;
    line-height: 80px;
    letter-spacing: -0.045em;
} 

.sub-title-3
{

    font-size: 80px;
    font-weight: 500;
    line-height: 80px;
    letter-spacing: -0.045em;
}

.content-32
{

    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: .4px;
}




.pill,
.pill-01
{
    position: relative;
    overflow: hidden;
    font-size: 24px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: .4px;
    margin-bottom: 5px;

    border-radius: 120px;
    border:2px solid #fff;
    padding:8px 30px;
    display: inline-block;
}

.pill::after
{
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: 0.3;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    /* z-index: -10; */

}

.pill:hover:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  }


.text-primary
{
    color:#EEC643 !important;
}

.text-grey {
    color: #575D66;
}

.text-white {
    color: #ffffff !important;
}

.btn-default
{
    position: relative;
    overflow: hidden;
    padding: 14px 24px;
    border-radius: 80px;
    background-color: #EEC643;
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: .4px;
    width: fit-content;
    transition: all .5s ease;
    z-index: 0;
}

.btn-default i
{
    margin-left:10px;
}

.btn-default:hover
{
    color:#000;
    /* background-color: #EEC643; */
    background-color: #ffffff;
    border: 1px solid #e9c74c;
}

section.services
{
    background-color: #232527;
}

section.services ul li
{
    cursor: pointer;
    transition: all .25s !important;
    position: relative;
    list-style: none;
   

    border-top:1px solid #43464a;
    border-bottom:1px solid #43464a;
}

section.services ul li:after, section.services ul li:before
{
    content:'';
    display: inline-block;
    position: absolute;
}

section.services ul li i:after
{
    display: inline-block;
    content: url(/assets/img/icon-arrow.svg);
    position: absolute;
    right:15px;
   
}

section.services a
{
    display: block;
    color:#fff;
    text-decoration: none;
    padding-top:40px;
    padding-bottom:40px;
}
section.services ul li:after, section.services ul li:before
{
  
    transition:all .25s;
    background-color: #222;
    width:0px;
    left:0px;
    top:0px;
    height: 4px;
    z-index: -1;
}
section.services ul li:before
{   background-color: #fff;
    height: 4px;
    width:0px;
    z-index: 10000;
    top:calc(100% - 0px);
}

section.services ul li:hover
{
    transition: all .25s !important;
    padding-left:20px;
}
section.services ul li:hover:after, section.services ul li:hover:before 
{
    transition:all .25s;
    position: absolute;
    width:100%;
    height: 4px;
    top:0px;
    background-color: #fff;
    color:#fff;
    text-decoration: none;
    
}
section.services ul li:hover:before 
{
    top:calc(100% - 0px) !important;
}

section.work .image
{
    overflow: hidden;;
    border-radius: 32px;;


}
section.work img
{
    transition: all .5s;
    
    width: 100%;;  
}

section.work img:hover
{
    transition: all .5s;
    transform: scale(1.2);
}

.testimonials {
    /* background-color: #121314; */
    background-image: url('/assets/img/testimonial-bg.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    /* background-blend-mode: overlay; */
    max-width: 1880px;
    margin: auto;
    border-radius: 40px;
}

.testimonials .testimonial-content {
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: .4px;
    color: #232527;
}

.testimonials .testimonial-image img {
    width: initial;
}

.testimonial-card
{
    text-align: left;
    width: 100%;
    min-height: 540px;
    padding: 60px;
    border-radius: 32px !important;
    background-color: #fff;
    display: flex;                   /* defines flexbox */
    flex-direction: column;          /* top to bottom */
    justify-content: space-between;  /* first item at start, last at end */
}

.testimonial-footer::before {
    content: '';
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background-color: #6D2DEC;
    position: absolute;
    top: -40px;
}

.testimonial-footer
{
    display: inline-block;
    position: relative;
}
.testimonial-content
{
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: .4px;
    color: #232527;
    
}
.testimonial-author
{
    font-size: 20px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: .4px;  
    color:#42464A;
}
.testimonial-role
{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .4px;
    color:#575D66;
    

}

section.about-us
{
    background-image: url('/assets/img/bg-new-about.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
}

.about-us .title {
    font-size: 60px;
    font-weight: 600;
    line-height: 100px;
    letter-spacing: .4px;
}

.about-us .sub-title-2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: .4px;
}

section.contact-us img
{
    margin-bottom: 40px;
}
section.contact-us a
{
    font-size: 24px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: .4px;
    text-decoration: none;
    color: #0D21A1;

}

.contact-us .title {
    font-size: 60px;
    font-weight: 600;
    line-height: 100px;
    letter-spacing: .4px;
}

.contact-us .testimonial-content {
    /* font-weight: 600; */
    color: #000;
}



/******** CONTACT US  *********/

.contact-hero
{
    background-image: url('/assets/img/bg-contact.jpg');
    background-size: cover;
    padding-top: 270px;
    padding-bottom: 25px;
    display: none;
}

.yellow-card {
    background-color: #EEC643;
}

.grey-card {
    background-color: #121314;
}

.contact-card
{
    width: 100%;
    padding: 80px;
    border-radius: 32px !important;
    /* background-color: #fff; */
}

.country_crop  input
{
    width: calc(100% - 179px);
}

section.lead-form
{
    background: rgb(3,7,30);
    background: linear-gradient(0deg, rgba(3,7,30,1) 0%, rgba(0,0,0,1) 100%);
}
.breadcrumb li, .breadcrumb a 
{
    color:#fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: .4px;
    text-decoration: none;
   
}


.form-border-start
{
    position: relative;
    border:1px solid #C1A9F0;
    border-radius: 24px 24px 8px 8px;
    padding:20px 20px;
    margin-bottom: 5px;
}
.form-border-continue
{
    position: relative;
    border:1px solid #C1A9F0;
    border-radius: 8px 8px 8px 8px;
    padding:20px 20px;
    margin-bottom: 5px;
}
.form-border-end
{
    position: relative;
    border:1px solid #C1A9F0;
    border-radius: 8px 8px 24px 24px ;
    padding:20px 20px;
    margin-bottom: 5px;
}
.form-border
{
    position: relative;
    border:1px solid #C1A9F0;
    border-radius: 24px ;
    margin:10px;

}

.contact-form label
{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .4px;
    color: #000;
}

/* .contact-form label.email:before
{
    position: absolute;
    right: 25px;
    top: 31px;
    content: "(Official Email Address Preferred)";
    color: #575D66;
} */


.contact-form input, .contact-form select, .contact-form textarea
{
    display: inline;
    color:#000;
    border: 0px;
    padding:0px;
    background-color: transparent !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: .4px;
}
.contact-form input:focus,  .contact-form select:focus, .contact-form textarea:focus
{
    color: #fff;
    box-shadow: none;
}

.contact-form input:disabled
{
    color:#727A85;
}


.contact-form label.project-type:before
{
    position: absolute;
    right: 25px;
    top: 25px;
    content: "";
    color: #575D66;
}


.contact-form .pill-01 ul li
{
    cursor: pointer;
    display:inline-block;
    color:#575D66;
    width: fit-content;
    list-style: none;
    padding:2px  20px  4px  6px;
    border-radius: 120px;
    border:1px solid #585d66   ;
    margin-bottom: 10px;
    margin-right: 5px;;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: .4px;
    position: relative;

}
.contact-form .pill-01 ul li:hover
{
    background-color: #232527;
}
.contact-form .pill-01 ul li i
{
    margin-right: 10px;
    padding:10px;
    color:#575D66;
    border-radius: 120px;;
    border:1px solid #585d66;
    font-size: 14px;
    width: 34px;;
    height: 34px;
}



.contact-form .pill-01 ul li.active
{
    color:#fff;
    border:1px solid #fff;
}

.contact-form .pill-01 ul li.active i
{
    color:#000 !important;
    background-color: #fff !important;;
}


.contact-form .pill-01 ul.pill-project-budget li
{
    padding-left:50px;
}

.contact-form .pill-01 ul.pill-project-budget li i
{
    position: absolute;
    top:6px;
    left:6px;
    border:5px solid #585d66;
}


.contact-form .form-check-input
{
    /* background-image: url(""); */
    /* background-color: #fff !important; */
    /* border-radius: 100px; */
    /* content: "\f00c";  */
    margin-right: 10px;
    padding: 10px;
    color: #575D66;
    border-radius: 120px;
    border: 1px solid #585d66;
    /* font-size: 14px; */
    width: 34px;
    height: 34px;

}
.form-check-input:checked[type=checkbox]
{
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 30 30'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-color: aliceblue !important;
}

.form-check-label
{
    color: #727A85;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    letter-spacing: .4px !important;
}




/******** THANK YOU  *********/

.thank-you-hero
{
    background-image: url('/assets/img/bg-thank-you.jpg');
    background-size: cover;
    padding-top: 270px;
    padding-bottom: 25px;
    background-position-y:bottom;
    display: none;
}

section.thank-you
{
    background-image: url('/assets/img/bg-thank-you-hero.jpg');
    background-size: cover;
}
section.thank-you .content
{

    font-size: 24px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: .4px;
    margin-top:40px;
    margin-bottom:30px;
    max-width: 650px;;
}
section.thank-you a
{
    color:#fff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: .4px;
    margin-bottom: 15   px;

}
section.thank-you a svg
{
    margin-right: 20px;;
}


/******** Services START  *********/
section.services-content
{
   padding-top:0px;
    /*background-position-x: calc(50% + 800px - 413px );*/
    background-color: #121314; ;
  
}
section.services-content .hero.row:first-child, section.values .hero.row:first-child
{
    margin-top:150px;
    margin-bottom: 220px;
}

section.services-content .container
{ 
    background-image: url('/assets/img/services-mobile.png');
    background-repeat: no-repeat;
    background-size: auto;
    background-position-x: right;


}
.services-header
{
    background-image: url('/assets/img/bg-services.jpg');
    background-size: cover;
    padding-top: 270px;
    padding-bottom: 25px;
    background-position-y:bottom;
    display: none;

}

.services-bullet
{
    padding-top:60px;
    padding-bottom  :60px;
    border-top:1px solid #43464a;
    border-bottom:1px solid #43464a;
    position: relative;
}



/******** Work START  *********/


.work-hero
{
    background-image: url('/assets/img/bg-work-header.jpg');
    background-size: cover;
    padding-top: 270px;
    padding-bottom: 25px;
    background-position-y:bottom;
    display: none;
}



/******** Testimonials START  *********/
.testimonials-hero
{
    background-image: url('/assets/img/bg-testimonials.jpg');
    background-size: cover;
    padding-top: 270px;
    padding-bottom: 25px;
    background-position-y:bottom;
    display: none;
}

.testimonial-slider
{
    padding-left:30px !important;
}
section.testimonials-content
{
    background-image: url('/assets/img/bg-testimonials-hero.png');
    background-size: cover;
    height: 1200px ;
}


/******** About START  *********/
.about-hero
{
    background-image: url('/assets/img/bg-about.png');
    background-size: cover;
    padding-top: 270px;
    padding-bottom: 25px;
    background-position-y:bottom;
    display: none;
}

section.about-content
{
    background-image: url('/assets/img/bg-about-hero.png');
    background-size: cover;
    height: 1200px ;
}

section.legend
{
    background-image: url('/assets/img/bg-about-legend.jpg');
    background-size: cover;
    background-position-y:center;
}

.legend-title
{
    
    font-size: 230px;
    font-weight: 800;
    line-height: 230px;
    letter-spacing: -0.045em;
}
.legend-sub-title
{
    color:#EEC643;
    font-size: 72px;
    font-weight: 100;
    line-height: 100px;
    letter-spacing: -0.05em;
     
}

.legend-title span
{
    font-weight: 100;

}


.legend .btn-default
{
    transition: all .5s;
    padding:0px 20px;
    font-size: 16px;
}




/******** Case Study START  *********/

.work-header
{
  
    background-size: cover;
    padding-top: 270px;
    padding-bottom: 25px;
}

.work-header.assistematic
{
    background-image: url(/assets/img/work/bg-work-header-assistematic.jpg);
}
.case-study-content.assistematic
{
    background-image: url(/assets/img/work/bg-hero-assistematic.png);
    background-position-x: right;
    background-position-y:  center;
    background-repeat: no-repeat;
}


.work-header.furasa
{
    background-image: url(/assets/img/work/bg-work-header-furasa.jpg);
}
.work-header.pillmate
{
    background-image: url(/assets/img/work/bg-work-header-pillmate.jpg);
}
.work-header.shaheen
{
    background-image: url(/assets/img/work/bg-work-header-shaheen.jpg);
}
.work-header.puma
{
    background-image: url(/assets/img/work/bg-work-header-puma.jpg);
}
.work-header.shades
{
    background-image: url(/assets/img/work/bg-work-header-shades.jpg);
}








section .hero-slider
{
    max-width: 700px;
}
section.hero .hero-container
{
    max-width: 580px;
    margin: auto;
    text-align: center;
    padding-top:64px;
    padding-bottom:64px;
}
.hero-container .title
{
    font-family: 'GeneralSans-Semibold';
    font-size: 48px;
    line-height: 52.8px;
}


.notice .my-card
{
    border-radius: 24px;
    padding:17px;
    background-color: #F8F8F8 !important;
    border:0px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.5s
}
.notice .my-card:hover
{
    background-color: #ebe2f5 !important;
    transition: all 0.5s

}
.notice .my-card:hover img
{
    transform: scale(1.1);
    transition: all 0.5s
}
.notice .my-card img
{
    transition: all 0.5s
}
.notice .image
{
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.notice .my-card .title
{
    font-family: 'GeneralSans-Semibold';
    font-size: 18px;
    font-weight: 400;
    line-height: 21.6px;
    margin-bottom: 15px;
}


.notice .my-card.active
{
    color:#F8F8F8;
    background-color: #773DBD !important;

}

.notice .my-card img, .notice .notice-board img, .solutions .mini-board img
{
    border-radius: 16px;
    width: 100%;
}

.notice-board, .mini-board
{
    padding:22px !important;
    border-radius: 32px !important;
    background-color: rgb(248, 248, 248,0) !important;

    position: absolute;
    width:calc(100% - 25px);
    overflow: hidden;
    opacity: 0;
    transition: all .5s ease-in;
}
.notice-board.active, .mini-board.active
{
 
    opacity: 1;
    background-color: #eceeef !important;
    z-index: 110;
    transition: all .5s ease-in;
}

.notice-board h2, .notice-board h4, .notice-board p, .notice-board a.link-with-arrow, .notice-board .news-category, .notice-board .news-title, .mini-board h2, .mini-board p, .mini-board a
{
    transform: translate(0px, 100px);
    display: inline-block;
    opacity: 0;
    transition: all 0.5s ease-out 
}
.notice-board img
{
    opacity: 0;
    transition: all 0.5s ease-out
}
.notice-board.active img, .mini-board.active img
{
    width: 100%;
    opacity: 1;
    transition: all 0.5s ease-out
}

.notice-board.active h2, .notice-board.active h4, .notice-board.active p, .notice-board.active a, .notice-board.active .news-category, .notice-board.active .news-title, .mini-board.active h2, .mini-board.active p, .mini-board.active a
{
    transform: translate(0px, 0px);
    opacity: 1;
    transition: all 0.3s ease-out
}
.notice-board.active h2, .mini-board.active p
{    transition-delay: 150ms; }
.notice-board.active p, .mini-board.active a, .mini-board.active a i
{    transition-delay: 300ms; }
.notice-board.active a
{    transition-delay: 450ms; }

.notice-board.active .news-title
{    transition-delay: 250ms; }


.notice-board p, .mini-board p
{    width:100% }



.news-board,  .news-board.active
{
   padding:0px !important;
   margin-left: 5px !important;
   background-color: #fff !important;
}

.news-slider
{
    margin:0px !important;
    padding:0px;
    display: block;
   
       
}

.news-card
{
  
    border-radius: 32px;
    background-color: #fafafa;
    float: left;
   
    
}

.news-content
{
    padding:25px;
}
.news-category
{
    font-size: 16px;
    color: #A5A5A5;
    line-height: 24px;
    margin-bottom: 10px;;
}

.news-title
{
    font-family: 'GeneralSans-Semibold';
    font-size: 18px;
    font-weight: 400;
    line-height: 21.6px;
    color: #27213C;
    margin-bottom: 40px;
}


.solutions /* MINI CARD */ 
{
    background-image: url('/assets/img/solutions-bg.png');
    background-repeat: no-repeat;
    background-position: top right;
}


.mini-card.active svg path{stroke:#fff !important;  transition: all 0.5s}
.mini-card svg path{stroke:#F15B2B !important;  transition: all 0.5s}
.mini-card
{
    width: fit-content;
    cursor: pointer;
    border-radius: 24px;
    background-color: #fff;
    color:#1A1A19;
    transition: all 0.5s;
    padding :12px 16px;

    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;

    box-shadow: 0px 3px 15px 0px #00000014;



}

.mini-card:hover
{
    background-color: #f7d9cf;
}
.mini-card.active
{
    background-color: #F15B2B;
    color:#fff;
    transition: all 0.5s
}

.mini-card div
{
    display: flex;
    align-items: end;
  
}

.mini-card svg
{
    margin-right: 10px;;
}

.gap15
{
    gap:15px;
}

.sub-card
{
    background-color: #fff;
    border-radius: 32px;
    display: flex;
    align-items:center;
    margin-bottom: 25px;

}
.unset-overflow
{
    overflow: unset !important;
}
.sub-card .content
{
    padding:15px;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-left:20px;
}

.sub-card .image
{
    width: 50%;
    overflow: hidden;
    border-radius: 32px;
    display: flex;
    justify-content: end;
}
.sub-card .image img
{
    height: 100%;
}

.fs-48
{

    font-size: 48px;
    font-weight: 400;
    line-height: 80px;
    letter-spacing: -0.05em;

    
}

#one {
    top: 0;
    background-color: yellow;
  }
  #two {
    top: 0px;
    background-color: red;
  }
  #three {
    top: 0px;
    background-color: blue;
  }
  #four {
    top: 0px;
    background-color: purple;
  }
.sticky, .sticky-heading {
    top: 0;
    height: 400px;
    position: sticky;
    position: -webkit-sticky;
  }

.sticky-heading
{
    top: calc(50%);
    height: 250px;
}  


.border
{
    border:1px solid #ff0000;
}

.link-with-arrow
{
   
    font-size: 18px;
    font-weight: 400;
    line-height: 21.5px;
    color: #773DBD;
    text-decoration: none;
}
.link-with-arrow i
{
    font-size: 12px;
    margin-left:5px;
}



.link-with-arrow-circle
{
    font-family: 'GeneralSans-Regular';
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: #fff;
    text-decoration: none;
    background-color: #773DBD;
    border-radius: 100px;
    padding:2px 2px 2px 20px;
    position: relative;
    display: inline-block;
    transition: all .5s;

}
.link-with-arrow-circle i
{
    margin-left:12px;
    padding:14px;
    background-color: #fff;
    color:#773DBD;
    border-radius: 100px;
}

.link-with-arrow-circle:hover
{
    background-color: #F15B2B;
}
.link-with-arrow-circle:hover i
{
    color: #F15B2B;
}

h2{
    font-family: 'GeneralSans-Regular';
    font-size: 32px;
    font-weight: 400;
    line-height: 38.4px;
}

h4{
    font-family: 'GeneralSans-Semibold';
    font-size: 18px;
    font-weight: 400;
    line-height: 21.6px;
}

.form-error
{
    color: red;
    border-color: red;
    font-size: 16px;;

    & input, & label, & textarea
    {
        color: red !important;
        border-color: red !important;
    }
}

.text-left
{
    text-align: left;
}
.pull-right
{
    float: right;
}
.pull-left
{
    float: left;
}
.full-width
{
    width: 100%;
}

.text-center
{
    text-align: center;
}
.m-auto
{
    margin:auto;
}
.orange
{
    color:#F15B2B !important;
}

header{
    transition:all .5s !important;
}
.bg-navy-blue
{
    transition:all .5s !important;
    background-color: #011638 !important;
}
.bg-gray
{
    background-color: #f8f8f8;
}

.flex
{
    display: flex;
    flex-wrap: wrap;
}
.flex-column
{
    flex-direction: column;
}
.align-middle
{
    align-items: center;
}

.flex-space-between
{
    justify-content: space-between;
}

.nav li
{
    padding: 0px 20px;
  
}
.nav li.has-child
{
    padding: 0px 35px 0px 20px;
  
}
.nav .arrow {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    position: absolute;
    top:6px;
    right: 20px;
  }
  .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  
  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

.nav li a.active
{
    color:#42464A !important;

}
.nav-container
{
    width:100%;
    height: fit-content;
    background-color: #ff0000;
    border-radius: 64px;
    position: absolute;
}


.partners
{
    position: relative;
}
.partners .fader
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    top:0px;
    left:0px;

    background: linear-gradient(
        to left,
        rgba(248, 248, 248, 1) 5%,
        rgba(248, 248, 248, 0) 50%,
        rgba(248, 248, 248, 0) 50%,
        rgba(248, 248, 248, 1) 95%
    );
}


.marquee
{
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}
.marquee img
{
    margin-left: 15px;
    margin-right: 15px;
}
#partners0
{  animation: marquee 18s linear infinite; }
#partners1
{  animation: marquee 22s linear infinite; }
#partners2
{  animation: marquee 20s linear infinite; }

  
  .marquee p {
    display: inline-block;
  }
  
  @keyframes marquee {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }


.globe-section
{
    background: #773dbd;
    padding-bottom: 0px !important;
}


.awards-collage
{
    margin-top:30px;
    gap:70px;
}





.cta input, .cta select, .cta textarea
{
    border-radius: 12px;
    background-color: transparent;
    color: #fff;
    border:1px solid #773dbd;
    padding:16px;
}


.cta input:focus
{
   
    background-color: transparent;
    color:#fff;
   
}

.cta .form .link-with-arrow-circle
{
    line-height: 42px;
    width:100%;
    text-align: center;
}
.cta .form .link-with-arrow-circle i
{
    float: right;
}

.cta .form p
{
    font-size: 14px;
    color:#787585;
    font-weight: 400;
    line-height: 19.6px;

}

footer
{
    /* color:#fff;
    background-image: url('/assets/img/bg-footer.jpg');
    background-size: cover; */
    padding-bottom: 120px;
    padding-top: 120px;
}

footer ul
{
    padding: 0px;
    list-style: none;
}
footer ul li:first-child a
{
    padding-left:0px 
}

footer ul a
{
    font-size: 12px;
    line-height: 27px;
    font-weight: 400;
    color: #27213C;
    text-decoration: none;
}

footer ul a:hover
{
    background-color: unset;
    /* color:#e7c549 !important; */
}


footer ul li
{
    padding:0px !important;
    margin: 8px 16px;

}

footer ul li:first-child {
    margin-left: 0;
}

footer .title
{
    font-size: 14px;
    font-weight: 700;
    line-height: 19.6px;
    margin-bottom: 20px;
}

footer .footer-right
{
    margin-left: auto;
    width: fit-content;
    color:#fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .4px;

}



footer p
{
    font-size: 14px;
    line-height: 20px;
    margin:0px;
}

footer span {
    color: #6D2DEC;
    font-weight: 700;
}

/* footer .social-icons
{
   margin-left:40px;
} */
footer .social-icons i
{

    transition: all .5s;
    font-size: 36px;;
    margin-right:15px;
    color: #EEC643;
}
footer .social-icons i.fa-facebook
{
    content: url(/assets/img/icon-social-facebook.svg);
}

footer .social-icons i.fa-instagram
{
    content: url(/assets/img/icon-social-insta.svg);
}

footer .social-icons i.fa-linkedin
{
    content: url(/assets/img/icon-social-linkedin.svg);
}


footer .social-icons i.fa-facebook:hover
{
    transition: all .5s;
    color:#1877f2;
}
footer .social-icons i.fa-square-twitter:hover
{
    transition: all .5s;
    color:#1DA1F2;
}

footer .social-icons i.fa-instagram:hover
{
    transition: all .5s;
    color:#F56040;
}
footer .social-icons i.fa-linkedin:hover
{
    transition: all .5s;
    color:#0077B5;
}

footer .footer-links
{
    color:#42464A;
}
footer .footer-links ul
{
    float: right;
    margin:0px;
}

footer .footer-links ul li
{
    float:left;
    margin-right: 20px;
}

.justify-content-center
{
    justify-content: center;
}





.pb-0
{
    padding-bottom:0px !important;
}
.pt-20
{
    padding-top: 20px !important;
}
.p0
{
    padding:0px !important;
}
.p2
{
    padding:10px;
}
.p3
{
    padding:15px
}
.p4
{
    padding:20px;
}
.p5
{
    padding:25px;
}
.p6
{
    padding:30px;
}
.p40
{
    padding:40px;
}
.p50
{
    padding:50px;
}

.p-l-10
{
    padding-left:10px;
}
.m0
{
    margin:0px;
}


.mb-10
{
    margin-bottom: 10px;
}
.mb-20
{
    margin-bottom: 20px;
}
.mb-30
{
    margin-bottom: 30px;
}
.mb-40
{
    margin-bottom: 40px;
}

.mb-45
{
    margin-bottom: 45px;
}
.mb-50
{
    margin-bottom: 50px;
}
.mb-60
{
    margin-bottom: 60px;
}
.mb-80
{
    margin-bottom: 80px;
}
.mb-100
{
    margin-bottom: 100px;
}
.mb-120
{
    margin-bottom: 120px;
}
.mb-140
{
    margin-bottom: 140px;
}
.mb-150
{
    margin-bottom: 150px;
}
.mt-auto
{
    margin-top:auto;
}
.mt-10
{
    margin-top:10px;
}

.mt-20
{
    margin-top:20px;
}
.mt-30
{
    margin-top:30px;
}

.mt-40
{
    margin-top:40px !important;
}

.mt-50
{
    margin-top:50px !important;
}

.mt-60
{
    margin-top:60px !important;
}

.mt-80
{
    margin-top:80px !important;
}

.mt-130 {
    margin-top: 130px;
}

.mt-150
{
    margin-top:150px !important;
}

.ml-5
{    margin-left: 5px; }
.ml-10
{    margin-left: 10px; }
.ml-20
{    margin-left: 20px !important; }
.ml-30
{    margin-left: 30px; }
.ml-40
{    margin-left: 40px; }
.ml-50
{    margin-left: 50px; }
.ml-60
{    margin-left: 60px; }

.mr-5
{
    margin-right:5px;

}
.mr-10
{
    margin-right:10px;
}
.mr-15
{
    margin-right:15px;
}
.mr-20
{
    margin-right:20px;
}
.mr-30
{
    margin-right:30px;
}
.mr-40
{
    margin-right:40px;
}
.strong
{
    font-weight: bold;
}

.letter-spacing-auto
{
    letter-spacing: normal !important;
    
}
.xbold {
    font-family: 'GeneralSans-bold';
    letter-spacing: -1px;
    
}

.line-height-24
{
    line-height: 24px;
}

.line-height-27
{
    line-height: 27px;
}
.line-height-28
{
    line-height: 28px;
}
.bold
{
    
    font-family: 'GeneralSans-Semibold';
}

.semi-bold
{
    font-family: 'GeneralSans-Medium';
}

.relative
{
    position: relative;
}
.clear
{
    clear: both;
}
.fs16
{    font-size: 16px; }
.fs18
{    font-size: 18px; }
.fs20
{    font-size: 20px; }
.fs24
{    font-size: 24px; }
.fs28
{    font-size: 28px; }
.fs30
{    font-size: 30px; }
.fs32
{    font-size: 32px; line-height: 40px; }
.fs34
{    font-size: 34x; }
.fs36
{    font-size: 36px; }
.fs40
{    font-size: 40px; }

.hide, .none
{
    display: none !important; 
}

.weight500
{
    font-weight: 500 !important;
}

/*
.col-lg-3, .col-lg-12, .col-lg-6, .notice-board, .row
{
    border:1px solid #ff0000
}
*/


.nav, .nav li
{
    position: relative;
   
}
.nav li:after {
  content: "";
  position: absolute;
  left:0px;
  width: 0px;
  display: block;
  height: 1px;
  transition: all 0.3s ease;
 
  background-color: #fff;
}

.nav li:after {
  bottom: 0px;
}

/*
.nav li:before {
  top: 0px;
}
*/

.nav li:hover:after {
  width: 100%;
  height: 1px;
  bottom: 0px;
  background-color: #fff;
}
/*
.nav li:hover:before {
  width: 100%;
  height: 1px;
  top: 0px;
  background-color: #fff;
}*/


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox khawar */ 
/* input[type=number] {
  -moz-appearance: textfield;
} */



.breadcrumb-item+.breadcrumb-item
{
    padding:0px !important;
   /* padding-left: 16px !important; */
}


.breadcrumb-item.breadcrumb-item::before
{
    float:right;
margin-right:14px;
    padding-left: 16px;
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "/");
}

.breadcrumb-item.breadcrumb-item:last-child:before
{
    content:'';
}

.breadcrumb-item+.breadcrumb-item::before
{
    padding:0px !important; 
    padding-left:16px !important;
}

header ul li a {
    padding: 0 !important;
}

.footer-left ul li a {
    padding: 0 !important;
}

.breadcrumb .breadcrumb-item a::after {
    content: "";
    position: absolute;
    left: 0px;
    width: 0px;
    display: block;
    height: 1px;
    transition: all 0.3s ease;
    background-color: #fff;
}

.breadcrumb .breadcrumb-item a {
    position: relative;
}

.breadcrumb .breadcrumb-item a:hover {
    transition: all .5s;
}

.breadcrumb .breadcrumb-item a:hover::after {
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.counter{
    display: flex;
}

.counter-title {
    font-size: 230px;
    font-weight: 100;
    line-height: 230px;
    letter-spacing: -0.045em;
}

.services-bullet::before {
    content: '';
    display: inline-block;
    position: absolute;
    transition: all .25s;
    background-color: #222;
    width: 0px;
    left: 0px;
    bottom: 0px;
    height: 4px;
    z-index: -1;
}

.services-bullet:hover::before {
    transition: all .25s;
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0px;
    background-color: #fff;
    color: #fff;
    text-decoration: none;
    top: calc(100% - 0px) !important;
}

.services-bullet::after {
    content: '';
    display: inline-block;
    position: absolute;
    transition: all .25s;
    background-color: #222;
    width: 0px;
    left: 0px;
    top: 0px;
    height: 4px;
    z-index: -1;
}

.services-bullet:hover::after {
    transition: all .25s;
    position: absolute;
    width: 100%;
    height: 4px;
    top: 0px;
    background-color: #fff;
    color: #fff;
    text-decoration: none;
}

.icons {
    border-radius: 80px;
    /* background-color: #EEC643; */
    position: relative;
    overflow: hidden;
    margin-right: 15px;
}

.icons img {
    width: 40px;
    z-index: 2;
    position: relative;
}

.icons span {
    position: absolute;
    width: 0px;
    height: 0px;
    border-radius: 100%;
    background-color: #fff;
    transition: all .5s;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.icons:hover span {
    transition: all .8s;
    width: 2000px;
    height: 2000px;
}

.check-border {
    padding: 6px;
    border-radius: 120px;
    border: 1px solid #585d66;
}

@keyframes slide-har {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.marq {
    margin-top: 60px;
    display: flex;
    position: relative;
}
 
.marq-box {
    position: relative;
    -webkit-animation: slide-har 80s linear infinite;
    animation: slide-har 80s linear infinite;
    display: flex;
    /* mix-blend-mode: soft-light; */
}

.marq-box img {
    margin-right: 40px;
}

.form-check-input:checked + .form-check-label {
    color: #fff;
}

.clients {
    background-color: #121314;
    padding-bottom: 120px;
    padding-top: 120px;
}

.clients .title {
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: .4px;
    color: #EEC643;
}

.clients .marq {
    margin-top: 40px;
    gap: 120px;
}

.clients .marq-box {
    gap: 120px;
}

.weight-normal {
    font-weight: 400;
}

.pl-20 {
    padding-left: 20px;
}

.nav-mobile .head {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 20px;
}

.nav-mobile .contact-details {
    font-size: 20px;
    font-weight: 400;
    color: #727A85;
    padding: 5px 0;
    line-height: 1.4;
}

.nav-mobile .top {
    padding: 24px 40px;
    background-color: #011638;
    border-radius: 32px 32px 0 0;
}
/* 
.nav-mobile .main {
    padding: 40px 40px;
} */

.purple-btn {
    background-color: #6D2DEC;
    color: white;
}

.whatsapp-btn {
    background-color: #42D209;
    color: white;
}

.purple-btn:hover {
    color: #000;
}

.swiper-pagination {
    position: unset !important;
    margin-top: 10px;
}

.swiper-pagination-bullet {
    height: 12px !important;
    width: 12px !important;
    border: 2px solid #6D2DEC !important;
    background: transparent !important;
    opacity: 1 !important;
    transition: .5s ease;
}

.swiper-pagination-bullet-active {
    height: 12px !important;
    width: 12px !important;
    border: 2px solid #6D2DEC !important;
    background: #6D2DEC !important;
    opacity: 1 !important;
}

.whatsapp-cta {
    background-image: url('/assets/img/whatsapp-cta.png') ;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 24px;
    border: 1px solid #C1A9F0;
    color: #000;
    box-shadow: 0 8px 24px 0 #0D21A114;
    padding: 30px;
}

.whatsapp-cta p {
    font-size: 16px;
    line-height: 32px;
    max-width: 490px;
}

.whatsapp-btn {
    padding: 14px 24px;
    display: inline-flex;
    align-items: center;
    background-color: #42D209;
    font-size: 16px;
    font-weight: 600;
    gap: 8px;
    border-radius: 80px;
    color: #000;
    transition: all .5s ease;
    z-index: 0;
}

.whatsapp-btn:hover {
    background-color: #fff;
    border: 1px solid #42D209;
}

.banner-form {
    border-radius: 40px;
    padding: 24px;
    border: 1.4px solid #FFFFFF3D;
    /* background-image: linear-gradient(to left, #38EEFF , #FFFFFF); */
    background: linear-gradient(226deg, rgba(56, 238, 255, 1) 0%, rgba(255, 255, 255, 1) 70%);
    /* box-shadow: 0 16px 40px 0 #340A8866; */
    /* box-shadow: inset -4px 4px 4px 0 #EEC64329; */
}

input::placeholder, textarea::placeholder {
    /* color: #EBE3FB !important; */
}

.form-btn {
    display: inline-flex;
    justify-content: space-between;
    background-color: #000;
    color: #ffffff;
}

.form-btn i {
    color: #EEC643;
}

.form-btn:hover i {
    color: #000;
    z-index: 9;
}

.form-btn:focus {
    background-color: #000;
}

.form-whatsapp {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #36323E;
    width: 100%;
    font-size: 20px;
    line-height: 40px;
    font-weight: 500;
    gap: 10px;
}

.text-bg {
    background: #ffffff;
    background: linear-gradient(to right, #ffffff 0%, #eec643 62%, #38eeff 76%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.top-bar {
    background-color: #EEC643;
    padding: 0 40px;
    justify-content: end;
}

.top-bar li {
    list-style: none;
    margin: 0 10px;    
}

.top-bar a {
    color: #000;
    font-size: 16px;
    text-decoration: none;
    line-height: 20px;
    font-weight: 600;
}

.bottom-bar {
    /* padding: 20px 40px; */
    height: 75px;
    padding:0px;
    display: flex;
    align-items: center;
}

.mobile-nav {
    background-color: #000;
    display: inline-flex;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding: 15px 0;
    position: fixed;
    bottom: 0;
    z-index: 99;
    gap: 15px;

}

@media (max-width: 375px) {
    .mobile-nav {
        gap: 10px;
    }    
}

.mobile-item {
    text-decoration: none;
    color: #ffffff;
    line-height: 0px;
}

.mobile-item .logo-text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

/* #exampleModal .modal-content {
    border-radius: 22px;
}

#exampleModal .modal-header {
    border: 0;
    padding: 10px 20px;
}

#exampleModal .btn-close {
    width: 20px;
    height: 20px;
    padding: 0 20px 0 0;
    margin-top: 15px;
} */

#exampleModal .form-border-start, #exampleModal .form-border-continue, #exampleModal .form-border-end, #exampleModal .form-border {
    padding: 10px 20px;
}

#exampleModal .btn-default {
    font-size: 18px;
    margin-top: 0px !important;
}

#exampleModal a {
    font-size: 16px;
    line-height: 10px;
}

#exampleModal .country_crop input#inputPhone {
    width: 80% !important;
}

.border-focus:focus {
    border: 0;
}

.portfolio a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    transition: all .5s;

    &:hover {
        color: #6D2DEC;
    }

    &:hover svg path {
        stroke: #6D2DEC;
    }

  
}

#clients img
{
    border-radius: 12px;
}

.fs-60 {
    font-size: 60px;
    line-height: 70px;
}

.fs-40 {
    font-size: 40px;
    line-height: 48px;
}

.fs-32 {
    font-size: 32px;
    line-height: 60px;
}

.fs-20 {
    font-size: 20px;
    line-height: 30px;
}

/* logo design page */

.logo-hero {
    background-image: url(/assets/img/logo-design/hero-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 150px;
}

.logo-reviews {
    margin-top: -85px;
}

.review-box {
    max-width: 1024px;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 11px 23px 31px 0 hsl(0deg 0% 0% / 14%);
    padding: 28px 60px; 
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
 
    justify-content: space-between;
}

.logo-cta {
    background: rgb(206,206,206);
    background: linear-gradient(90deg, rgba(206,206,206,1) 0%, #d9d9d900 100%);
    margin-top: -143px;
    padding-top: 200px;
    
    & p {
        color: #262626;
        margin: 20px 0 30px;
        font-size: 18px;
        line-height: 27px;
        /* max-width: 488px; */
    }
}

.dark-text-grad {
    background: #ffffff;
    background: linear-gradient(to right, #2C2C2C 0%, #6801EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

    & p {
        margin: 20px 0 30px;
        font-size: 18px;
        line-height: 27px;
        /* max-width: 488px; */
    }

    & img {
        width: 100%;
    }
}

.logo-cta-3 {
    background: rgb(255, 255, 255);
    padding-bottom: 0;

    /* & .container {
        background-image: url(/assets/img/logo-design/4.png);
        background-repeat: no-repeat;
        background-size: auto;
        background-position-y: bottom;
        background-position-x: -30px;
    } */

    /* & .row {
        margin: 150px 0;
    } */
    
    & p {
        color: #262626;
        margin: 20px 0 30px;
        font-size: 18px;
        line-height: 27px;
        max-width: 540px;
    }

    & h2 {
        max-width: 590px;
    }
}

.logo-testimonial {
    background-image: url(/assets/img/logo-design/testimonials-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 120px;
}

.review-card {
    /* background: linear-gradient(137deg, #F4F4F4 0%, #7C4AE0 50%, #461D96 100%); */
    max-width: 100%;
    height: 100%;
    /* backdrop-filter: blur(30px); */
    padding: 40px 50px;
    /* border-radius: 54px; */
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
    position: relative;

    &::before {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        backdrop-filter: blur(12px);
        border-radius: 24px;
        border: 2px solid #9999993d;
        z-index: -2;
    }

    & img {
        width: initial !important;
    }

    & p {
        font-size: 18px;
        margin-bottom: 80px;
        line-height: 27px;
        text-align: left;
        margin-top: 15px;
    }

    & .brand-logo
    {
        margin-bottom:30px;
    }

    & .footer {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;

        & img {
            width: 100%;
        }

        & h5 {
            font-size: 24px;
            line-height: 36px;
            margin: 0;
        }

        & p {
            margin: 0;
            font-size: 16px;
            line-height: 20px;
            color: #EBE3FB;
        }

        &::before {
            content: '';
            width: 80px;
            height: 4px;
            border-radius: 2px;
            background-color: #eec643;
            position: absolute;
            top: -30px;
        }
        
    }
    
}

.contact {
    background: #efefef;
    /* background: linear-gradient(to left, rgba(206,206,206,1) 0%, #d9d9d900 100%); */

    & p {
        color: #262626;
        margin: 20px 0 30px;
        font-size: 18px;
        line-height: 27px;
        max-width: 488px;
    }

    & .input-control {
        width: 100%;
        /* background-color: rgb(230 230 230) !important; */
        background-color: #fff !important;
        border: 2px solid #dddddd;
        border-radius: 12px; 
        padding: 10px 20px;
        font-weight: bold;
        color: #555 !important;

        &::placeholder {
            color: #5856d69a;
            font-size: 18px;
            font-weight: bold;
        }

        &:focus {
            outline: none;
        }
    }

    & .btn-form {
        background-color: #712be9; /* #EEC643; */
        border-radius: 80px;
        color: #fff;
        font-size: 20px;
        line-height: 30px;
        font-weight: bold;
        padding: 13px 24px;
        border: 2px solid #712be9;
        transition: all .5s;

        &:hover {
            background-color: rgb(255 255 255 / 30%) !important;
            color:#712be9
        }
    }
}

.new-footer {
    padding: 80px 0 0;

    & .contact-info {
        list-style: none;
        padding: 0;
    }

    & .mt-52 {
        margin-top: 52px;
    }

    & .contact-info li, li {
        margin: 0px;
        color: #5856D6;
    }

    & .contact-info a, a {
        color: #6801EE;
        font-size: 16px;
        line-height: 30px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    & .contact-info p {
        color: #909090;
        font-size: 16px;
        line-height: 27px;
        font-weight: 500;

        & i {
            color: #909090;
        }
    }

    /* & ul {
        list-style: disc;
        padding-left: 20px;
    } */

    & .logo-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px 0px 1px 0px solid #000;
        border-top: 1px;
        border-bottom: 1px;
        border-style: solid;
        border-color: rgb(0 0 0 / 20%);
        border-left: 0;
        border-right: 0;
        padding: 20px 0;
        margin-top: 30px;

        & .footer-logo {
            margin-top: 10px;
        }
    }

    & .rights {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;

        & p {
            color: #262626;
            font-size: 16px;
            line-height: 27px;
            font-weight: 500;
        }
    }

    & .social {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 20px;
        margin-top: 25px;
    }
}

.web-cta-3 {
    background: rgb(255, 255, 255);
    /* padding-bottom: 0; */

    /* & .container {
        background-image: url(/assets/img/web-design/4.png);
        background-repeat: no-repeat;
        background-size: auto;
        background-position-y: bottom;
        background-position-x: 0px;
        overflow: hidden;
    }

    & .row {
        margin: 100px 0 150px;
    } */
    
    & p {
        color: #262626;
        margin: 20px 0 30px;
        font-size: 18px;
        line-height: 27px;
        /* max-width: 488px; */
    }

    /* & h2 {
        max-width: 590px;
    } */
}

.banner-shapes {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    height: 500px;
    position: relative;
}
.banner-shapes .shape-2 {
    top: 0;
    left: 100px;
}
.banner-shapes .shape-3 {
    top: 65px;
    right: -10px;
}
.banner-shapes .shape-4 {
    bottom: 0;
    right: 100px;
}
.banner-shapes .shape-5 {
    left: -10px;
    top: 220px;
}

.banner-shapes .logo
{
    background-color: #fff !important;
    border-radius:40px;
    transform-style: preserve-3d;
    padding:35px;

    & img
    {
        /* transform: translate3d(0px, 0px, 1000px); */
        transform: translateZ(60px);
        width:160px;
    }
}


/* new home */

.number-pagination {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    max-width: 470px;
    margin: 20px auto 0;
}

.number-pagination .current-slide, .number-pagination .total-slides {
    font-weight: bold;
    color: #5C5C5C;
    font-size: 22px;
}

.creation-swiper-pagination.swiper-pagination-progressbar, .pkg-swiper-pagination.swiper-pagination-progressbar {
    position: relative !important;
    background-color: #B794FF !important;
    height: 3px !important;
}

.creation-swiper-pagination .swiper-pagination-progressbar-fill, .pkg-swiper-pagination .swiper-pagination-progressbar-fill {
    background: #262626 !important;
    position: absolute;
    left: 0;
    top: -1.67px !important;
    width: 100%;
    height: 6px !important;
    transform: scale(0);
    transform-origin: left top;
    border-radius: 5px !important;
}

.creation-tabs,
.services-tabs,
.packages-tabs {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    margin-bottom: 30px;
}

.creation-tabs .tab-title,
.services-tabs .services-tab-title,
.packages-tabs .packages-tab-title {
    color: #363636;
    font-size: 22px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.creation-tabs .tab-title.active,
.services-tabs .services-tab-title.active,
.packages-tabs .packages-tab-title.active {
    font-weight: bold;
}

.creation-tabs .tab-title:hover,
.services-tabs .services-tab-title:hover,
.packages-tabs .packages-tab-title:hover {
    font-weight: bold;
}

.creation-tabs .tab-title::after,
.services-tabs .services-tab-title::after,
.packages-tabs .packages-tab-title::after {
    content: "";
    position: absolute;
    left: 0px;
    width: 0px;
    display: block;
    height: 1px;
    transition: all 0.3s ease;
    background-color: #fff;
}

.creation-tabs .tab-title:hover:after,
.creation-tabs .tab-title.active::after,
.services-tabs .services-tab-title:hover:after,
.services-tabs .services-tab-title.active::after,
.packages-tabs .packages-tab-title:hover:after,
.packages-tabs .packages-tab-title.active::after {
    width: 100%;
    height: 1px;
    bottom: 0px;
    background-color: #000;
}

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

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

.creation-contents .tab-content,
.services-contents .services-tab-content,
.packages-contents .packages-tab-content {
    display: none;
}

.creation-contents .tab-content.active, 
.services-contents .services-tab-content.active, 
.packages-contents .packages-tab-content.active {
    display: block;
    animation: appear 1s ease;
}

.creation-contents .tab-images {
    position: relative;
}

.creation-contents .tab-images-hover {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsl(0deg 0% 0% / 70%);
    opacity: 0;
    transition: all .5s;
}

.creation-contents .tab-images:hover .tab-images-hover {
    opacity: 1;
}

.creation-contents .tab-images-hover a {
    font-size: 22px;
    color: #ffffff;
}

.home-slider .swiper-slide {
    justify-content: flex-start !important;

    & .image-box {

        padding: 20px;
        border-radius: 48px;
        backdrop-filter: blur(10px);
        border: 2px solid #9999993d;
        position: relative;

        & img {
            width: auto;
            border-radius: 28px;
        }
    }
}
.swiper-slide:has(~ .swiper-slide-visible)
{
    animation: opacity0 .5s;
    opacity:0;
}

@keyframes opacity0 {
    0% {opacity:1;}
    100% {opacity:0;}
    
}


.number-pagination-2 {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    max-width: 470px;
    margin-top: 20px;
}

.number-pagination-2 .current-slide-1, .number-pagination-2 .total-slides-1 {
    font-weight: bold;
    color: #ffffff;
    font-size: 22px;
}

.home-swiper-pagination.swiper-pagination-progressbar {
    position: relative !important;
    background-color: #B794FF !important;
    height: 3px !important;
}

.home-swiper-pagination .swiper-pagination-progressbar-fill {
    background: #ffffff !important;
    position: absolute;
    left: 0;
    top: -2px !important;
    width: 100%;
    height: 6px !important;
    transform: scale(0);
    transform-origin: left top;
    border-radius: 5px !important;
}

.pl-311 {
    padding-left: 311px;
}

.line-height-auto
{
    line-height: auto;;
}
.fs-24
{
    font-size:24px;
}
.fs-35 {
    font-size: 35px;
    line-height: 45px;
}

.accordion {
    --bs-accordion-bg: transparent;
}

.accordion .accordion-item {
    border: none;
    border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
    border-radius: 0px;
}

.accordion .accordion-button {
    color: #36323D;
    font-size: 28px;
    padding: 20px 0;
    box-shadow: none;
}

.accordion .accordion-button:focus {
    outline: none;
    box-shadow: none;
}

.accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23.8706' cy='23.8673' r='19.4876' transform='rotate(75 23.8706 23.8673)' fill='%235212A5'/%3E%3Cpath d='M20.8061 32.9013V26.7651H14.6699V21.3191H20.8061V15.1829H26.6875V21.3191H32.8237V26.7651H26.6875V32.9013H20.8061Z' fill='%23FFFEFE'/%3E%3C/svg%3E%0A");
    width: 39px;
    height: 39px;
    background-size: contain;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23.8672' cy='23.8673' r='19.4876' transform='rotate(75 23.8672 23.8673)' fill='%235212A5'/%3E%3Cpath d='M26.6836 26.7651H20.8022H14.666V21.3191H20.8022L26.6836 21.3191L32.8198 21.3191V26.7651H26.6836Z' fill='%23FFFEFE'/%3E%3C/svg%3E%0A");
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
}

.accordion-body {
    padding: 0px 40px 20px 0px;
    font-size: 18px;
    line-height: 27px;
}

/* .form-border .label {
    color: #5856d69a;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: 7px;
    left: 20px;
    background-color: #e8e8e8;
    padding: 0 10px;
    transition: all .5s ease;
}

.form-border .input-control:focus~.label {
    color: #000;
    transform: scale(0.85) translateY(-32px);
} */


.scroll-y {
    overflow-y: scroll;
    overflow-x: hidden;
    /* scroll-behavior: smooth; */
    position: relative;
    cursor: grab;

    & li:last-child
    {
        margin-bottom:30px;
    }  
}

/* .scroll-y:active {
    cursor: grabbing;
} */

/* width */
.scroll-y::-webkit-scrollbar {
    width: 4px;
  }
  
/* Track */
.scroll-y::-webkit-scrollbar-track {
background: #B794FF;
}

/* Handle */
.scroll-y::-webkit-scrollbar-thumb {
background: #262626;
width: 6px;
}

/* Handle on hover */
.scroll-y::-webkit-scrollbar-thumb:hover {
background: #262626;
}



/* packages */

.packages
{
    background: rgb(206,206,206);
    background: linear-gradient(to left, rgba(206,206,206,1) 0%, #d9d9d900 100%);

    & .sub-title
    {
        color:#0D21A1;
    }

    & .package-card
    {
        
        background-color:#fff;
        border-radius:16px 16px 24px 24px;
        margin-bottom: 25px;
        padding-inline: 15px;
        border:1px solid #D7DFEB;
        box-shadow: 0px 8px 8px 0 #0D21A114;
        height: 550px;
        width: inherit;
        transform: scale(1.05);

        &.basic-package
        {
            transform: scale(.95);
        }


        & .package-card-head
        {
            background-color:#EBE3FB;
            color:#121314;
            display: flex;
            justify-content: space-between;
            padding:32px 25px 15px;
            border:1px solid #D7DFEB;
            border-top:0px;
            border-radius: 0px 0px 12px 12px;
            /* filter: drop-shadow(0px 8px 4px #0D21A114); */
            box-shadow: 0px 8px 8px 0 #0D21A114;
            position: relative;

            & .package-price, & .package-price-orange
            {
                background-image: url(/assets/img/logo-design/price-badge.png);
                background-size: contain;
                background-repeat: no-repeat;
                font-size: 38px;
                display: flex;
                align-items: center;
                width: 112px;
                height: 125px;
                position: absolute;
                flex-direction: column;
                gap: 7px;
                padding-top: 22px;
                top: -3px;
                right: -3px;
                color: #000;

                & span
                {
                    font-size: 16px
                }

            }
            .package-price-orange
            {
                font-size:50px;
                gap: 0px;
                background-image: url(/assets/img/logo-design/price-badge-orange.png);

                & span
                {
                    transform:translateY(-10px);
                }
            }

        }

        & .package-card-body
        {
            padding: 60px 30px 30px;
            height: calc(100% - 80px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            & ul
            {
                list-style-type: none ;
                color:#232527;
                /* margin-bottom: 30px; */
                
                & li
                {
                    
                    display:flex;
                    justify-content: space-between;
                    padding-bottom: 5px;
                    text-align: left;

                    & p
                    {
                        font-size:12px;
                        line-height:12px;
                        color:#727A85;
                        margin:0px;
                    }

                    & .list-pages {

                        margin-left: 30px;
                    
                        & li {
                            list-style: disc;
                            display: list-item;
                            padding-bottom: 15px;
                            line-height: 22px;
                        }
                    }
                }
            }
            
            & .btn-default
            {
                width: 100%;
                padding: 14px 24px;
                font-size: 20px;
                line-height: 30px;
            }

            & .main-list li {
                padding-bottom: 20px;
            }
        

        }

        
        & .package-card-head
        {
            line-height:20px;
        }

        &.basic-package .btn
        {
            /* background-color:#000; */
            color:#000;
        }
        &.basic-package .btn:hover
        {
            color:#000;
        }


        &.standard-package 
        {
            
            & .package-card-head 
            { 
                /* background-image: url('assets/img/package-standard-header.png') ;
                background-size: cover;
                background-repeat: no-repeat; */
                background-color: #6D2DEC;
                color:#fff;
                line-height:20px;


                & .recommened
                {
                    text-transform: uppercase;
                    font-family: 'GeneralSans-bold';
                    position: absolute;
                    border-radius: 0px 0px 6px 6px;
                    background-color: #EEC643;
                    padding:10px 20px;
                    color: #000;
                    font-size:16px;
                    top:0px;
                    left:0px;
                    letter-spacing: -.5px;
                    line-height: 4px;
                    /* font-weight: bold; */
                    
                }

            }

            & .btn
            {
                background-color: #712be9;
                color:#fff;
                
            }
            & .btn:hover
            {
                color:#000;
                border: 1px solid #712be9;
                background-color:rgb(255, 255, 255);
            }
        }
            
    }

}



@media (max-width: 575px) {
.packages {
    & .package-card {
        & .package-card-head {
            & .package-price, .package-price-orange {
                font-size: 28px;
                width: 82px;
                height: 126px;
                gap: 0;
                padding-top: 17px;
            }
        }

        & .package-card-body {
            padding: 30px 25px 30px;

            & .btn-default
            {
                font-size: 16px;
                line-height: 24px;
            }
            }
        }
    }

    .packages {
        & .package-card {
            & .package-card-head {
                & .package-price-orange {
                    & span {
                        transform: translateY(0px);
                    }
                }
            }
        }
    }
}



.menu-dropdown {
    position: absolute;
    top: 35px;
    background-color: black;
    width: max-content;
    left: -18px;
    padding: 0;
    opacity: 0;
    transition: all 0.5s;
    border-radius: 0px 0px 12px 12px;
    height: 0;
    overflow: hidden;
}

.menu-dropdown ul {
    list-style: none;
    padding: 10px 40px 10px 20px;
    border-top: 2px solid #EEC643;
}

.menu-dropdown ul li {
    margin: 0;
    position: relative;
}

.menu-dropdown ul li::after {
    content: none;
}

.menu-dropdown ul li a {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: .4px;
    text-decoration: none;
    transition: all .5s;
    display: block;
}

.menu-dropdown ul li a:hover {
    color: #EEC643;
}

.dropdown:hover 
{
    &::before
    {
        transform: rotate(180deg);
     
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59 0.294922L6 4.87492L1.41 0.294922L0 1.70492L6 7.70492L12 1.70492L10.59 0.294922Z' fill='%23EEC643'/%3E%3C/svg%3E%0A") !important; 
    
    }

    & .menu-dropdown {
        opacity: 1;
        height: auto;
        padding: 10px 0px 0;
        z-index: 3;
    }
}

.dropdown::after {
    content: none !important;
}

.dropdown:has(.menu-dropdown:hover)
{
    
    .nav-link 
    {
        color: #EEC643;;
    }
}

.dropdown
{
    margin-right:35px;
}
.dropdown::before
{
    transition:all .5s;
    content:'';
    position:absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59 0.294922L6 4.87492L1.41 0.294922L0 1.70492L6 7.70492L12 1.70492L10.59 0.294922Z' fill='white'/%3E%3C/svg%3E%0A");
    width:12px;
    height:8px;
    top:15px;
    right:-17px;
}


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

.cube {
    position: absolute;
    bottom: -200px;
    right: -80px;
    width: 330px;
    z-index: 2;
    animation: rotate 40s infinite linear;
}

.cylinder {
    position: absolute;
    bottom: -120px;
    left: 10px;
    width: 200px;
    z-index: 2;
    animation: rotate 40s infinite linear;
}

/* Business Collateral */

.business-portfolio .swiper-next {
    margin: 0;
    position: absolute;
    top: 50%;
    right: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.business-portfolio .swiper-prev {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.business-portfolio .web-portfolio-slider a {
    position: relative;
}

.business-portfolio .web-portfolio-slider a:before {
    content: '';
    width: 100%;
    height: 100%;
    background: hsl(0deg 0% 0% / 40%);
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23.8706' cy='23.8673' r='19.4876' transform='rotate(75 23.8706 23.8673)' fill='white' fill-opacity='0.7'/%3E%3Cpath d='M20.8056 32.9013V26.7651H14.6694V21.3191H20.8056V15.1829H26.687V21.3191H32.8232V26.7651H26.687V32.9013H20.8056Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .5s;
    opacity: 0;
}

.business-portfolio .web-portfolio-slider a:hover:before {
    opacity: 1;
}

@keyframes enterance {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.business-portfolio-gallery.active
{
    display:flex;
    animation: enterance .5s ease forwards;
}
.business-portfolio-gallery
{
    display:none;
    height:100%;
    width: 100%;
    position:fixed;
    background-color:#000000cc;
    top:0px;
    left:0px;
    z-index: 1000;

    & .container
    {
        
        width:auto;
        padding: 80px 80px 40px 80px;
        height:100%;
        background-color:#fff;
        
        overflow-Y: scroll;

        & img
        {
            width: 100%;
        }
    }


    .closs
    {
        transition: all .5s;
        display:flex;
        justify-content:center;
        align-items:center;
        width:36px;
        height:36px;
        background: #ffffff50;
        border-radius: 100px;
        position:absolute;
        right:20px;
        top:20px;

        &:hover
        {
            background: #ffffff;
            svg rect
            { 
                transition: all .5s;
                fill: #000;

            }
        }
        
    }


    ::-webkit-scrollbar {
    width: 0px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: #888;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: #555;
    }

    .thanks
    {
        display:flex;
        justify-content:center;
        margin-top:40px;
        flex-direction:column;
        text-align:center;
        color:#000;
        font-weight:600;

        & .icon
        {
            margin:auto;
            width: 80px;
            height:80px;
            display:flex;
            justify-content:center;
            align-items: center;
            background-color: #0057ff;
            border-radius:200px;
            margin-bottom:20px;
        }
        
        
    }
}



/* mobile services nav */
@keyframes faderight {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}

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

@keyframes fadeleft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

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

.services-nav {
    display: none;
}

.services-nav.active {
    display: block;
    animation: faderight .5s ease;
}

.nav-mobile .main {
    animation: fadeleft .5s ease;
}

.back-bar ul, .services-menu ul {
    list-style: none;
}

.back-bar ul {
    border-bottom: 1px solid #fff;
}

.back-bar ul li a {
    margin-bottom: 15px;
}

.back-bar ul svg {
    margin-right: 7px;
}

.services-menu ul li:first-child {
    margin-top: 20px;
}

.services-menu ul li a {
    font-size: 27px;
    line-height: 30px;
}

#contact label
{
        transition:all .15s;
        left:33px;
        top:17px;
        position:absolute;
        background-color: transparent;
        z-index: 199;
        font-size: 16px;
        z-index: 0;
        color: #5856d6;
        
        font-weight: bold;
        pointer-events: none;

        &:before
        {
                position:absolute;
                left:-3px;
                top:10px;
                height:2px;
                background: #ffffff;
                width:calc(100% + 6px);
                color:transparent;
                content:"transparent";
                z-index:-1;

        }


}
label:has(+ input:focus), label:has(+ textarea:focus) , .label-fixed
{
        
        font-size:13px !important;
        top:-10px !important;

        &:before{
            background: #efefef !important;
        }

       

   
}
#contact label.contact
{
        left:20px;
        display: inline-block;
        width: 80%;;
        white-space: nowrap;
       
        text-overflow: ellipsis;
       


        &:before
        {
            width: calc(185px) !important;
          
        }
}


.swiper-next{
    margin: 0;
    position: absolute;
    top: 50%;
    right: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}
.swiper-prev{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

#exampleModal .modal-content {
    border-radius: 22px;
}

#exampleModal .modal-header {
    border: 0;
    padding: 0;
}

#exampleModal .close-btn {
    border: none;
    padding: 0;
    position: absolute;
    background: transparent;
    right: 0;
    z-index: 10000;
}

.left-content {
    background-image: url('/assets/img/modal-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height:600px;

    & h2 {
        font-size: 54px;
        line-height: 64px;
        margin-bottom:15px !important; 
    }
}

.letter-spacing--2
{
    letter-spacing: -2px;;
}

/* scroll to top */
.progress-wrap {
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
    /* mix-blend-mode: difference; */
    background: #712be9;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);   
}

.progress-wrap::after {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    content: '\f077';
    text-align: center;
    line-height: 44px;
    font-size: 13px;
    font-weight: 900;
    color: #ffffff;
    left: 0;
    top: 0;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #ffffff;
    stroke-width: 4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

/* blogs page */
.blogs-breadcrum {
    background-image: url('/assets/img/blogs/blogs-bg.png');
    background-repeat: no-repeat;
    background-size: cover;

    & .content {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;

        h1 {
            font-size: 145px;
            font-family: 'GeneralSans-Bold';
            font-weight: bold;
            color: #ffffff;
        }

        p {
            font-size: 24px;
            line-height: 1.3;
        }
    }
}

.recent-blogs {
    background: linear-gradient(90deg, rgba(206, 206, 206, 1) 0%, #d9d9d900 100%);

    & .insights {
        display: inline-flex;
        align-items: center;
        width: 100%;
        gap: 10px;
        margin-bottom: 40px;

        .recent {
            font-size: 24px;
            font-family: 'GeneralSans-Bold';
            font-weight: bold;
            color: #000;
            letter-spacing: 0px;
        }

        .divider {
            width: 1020px;
            max-width: 100%;
            height: 1px;
            background-color: rgb(0 0 0 / 20%);
        }
    }

    & .blog-card {
        margin-bottom: 50px;

        .ago {
            color: rgb(18 20 22 / 81%);
            font-size: 18px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .seprator {
            width: 28px;
            height: 1px;
            background-color: rgb(18 20 22 / 81%);
        
        }
    }
}

.category-blogs {

    & .project{

        &:nth-child(2){
            margin-top: 150px;
        }

        &:nth-child(5){
            margin-top: 150px;
        }

        &:nth-child(8){
            margin-top: 150px;
        }
    }

    & .clients-btn {
        font-size: 30px;
        font-weight: bold;
        color: #909397;
        background: none;
        border: none;
        padding: 0;
        margin-right: 50px;
        margin-bottom: 20px;
        font-family: 'GeneralSans-Medium';
        transition: all .5s;

        &:hover {
            color: #000;
        }

        & sup {
            font-size: 12px;
            top: -24px;
            left: -5px;
        }
    }

    & .clients-btn.is-checked {
        color: #000;
    }

    & .cat-box {

        h4 {
            font-size: 18px;
            line-height: 1.2;
            color: #000;
            letter-spacing: -0.25px;
            font-family: 'GeneralSans-Medium';
        }
    }
}