@import url(https://fonts.googleapis.com/css?family=Open+Sans|Raleway);
@import url(https://fonts.googleapis.com/css?family=Raleway:900);
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');


@font-face {
    font-family:Meritocracy-Regular;
    src: url(../fonts/Meritocracy-Regular.otf);
}



@font-face {
    font-family:Prettywise-Semibold;
    src: url(../fonts/prettywise-semibold.otf);
}


@font-face {
    font-family:Prettywise-Medium;
    src: url(../fonts/prettywise-medium.otf);
}


@font-face {
    font-family:Prettywise-Regular;
    src: url(../fonts/prettywise-regular.otf);
}

@font-face {
    font-family:Ariata-Display-Black;
    src: url(../fonts/AriataDisplayBlack.otf);
}


@font-face {
    font-family:Ariata-Display-Bold;
    src: url(../fonts/AriataDisplayBold.otf);
}


@font-face {
    font-family:Ariata-Display-Medium;
    src: url(../fonts/AriataDisplayMedium.otf);
}

@font-face {
    font-family:Visby-Light;
    src: url(../fonts/VisbyCF-Light.otf);
}


@font-face {
    font-family:Visby-Medium;
    src: url(../fonts/VisbyCF-Medium.otf);
}



* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


*,:after,:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
body,html{
    /*font-size:100%;*/
    padding:0;
    margin:0;
    
} 







body {
    background-color: #100f3a;
    background-image: url(https://assets-global.website-files.com/64fc0c6015ed201d5b25562a/64fc11eff79914c7bc25f794_Hero%20BG.webp);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
}


.tw {
    width:100%; 
}

 h2 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size: 4.5em;
   
    color: #FCB350;
}


h3 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:3.5em;
    color: #FCB350;
}


h4 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:3em;
    color: #FCB350;
}


h5 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:2.5em;
    color: #FCB350;
}


h6 {
    font-family: 'Visby-Light', sans-serif;
    font-size:2em;
    color: #fff;
}

/*****NAVBAR******/

.my-text-logo   {
    font-family: 'Meritocracy-Regular', cursive;
    color:#fff;
    font-size: 30px;
    font-weight: normal;
}



.navbar-brand  {
    font-family: 'Meritocracy-Regular', cursive;
    color:#fff;
    font-size: 30px;
    font-weight: normal;
}


.navbar-brand:hover  {
    font-family: 'Meritocracy-Regular', cursive;
    color:#fff;
    font-size: 30px;
    font-weight: normal;
}


.navbar {
    transition: all 0.4s;
}

.navbar .nav-link {
    color: #fff;
     font-family: 'Visby-Light', sans-serif;  
     font-size: 20px;
}





.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
    text-decoration: none;
   
}

.my-nav-2 {
    width:96%;
    margin: 0 auto;
    padding-top: 1em;
}



.my-nav .nav-item:hover .nav-link {
    border-bottom:#FFDF00 2px solid;
    animation-duration: 3s;
   
}

.navbar-brand img {
  width: 150px;
    height: auto;
}

/* Change navbar styling on scroll */
.navbar.active {
   background:rgba(0,0,0,0.9);
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
     font-family: 'Visby-Light', sans-serif;     
}

.navbar.active .nav-link {
    color: #fff;
    font-size: 20px;
     font-family: 'Visby-Light', sans-serif;     
}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: #fff;
     font-family: 'Visby-Light', sans-serif;     
    text-decoration: none;
}

.navbar.active .navbar-brand {
   /* font-family: 'Alex Brush', cursive;*/
      font-family: 'Meritocracy-Regular', cursive;
    color:#fff;
    font-size: 30px;
   font-weight: normal;
    
}


.navbar.active .navbar-brand:hover {
    /*font-family: 'Alex Brush', cursive;*/
      font-family: 'Meritocracy-Regular', cursive;
    color:#fff;
    font-size: 30px;
    font-weight: normal;
    
}

.navbar-nav > li{
  padding-left:20px;
  padding-right:20px;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: none!important;
    border-radius: 0rem!important;
}




.navbar-dark .navbar-toggler {
    border:none!important;
    color:rgba(255,255,255,0.9)!important;
}



.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 1)!important;
}


button{
    text-decoration: none!important;
     outline: none!important;
  box-shadow: none!important;
}



.btn:focus {
  outline: none!important;
  box-shadow: none!important;
}




/*.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
    fill:#fff!important;
    color:#fff!important;
}*/

/* Change navbar styling on small viewports */
@media (max-width: 991.98px) {
    .navbar {
        background:rgba(0,0,0,0.9);
         font-size: 20px;
    }

    .navbar .navbar-brand, .navbar .nav-link {
        color: #fff;
    }
}










.page-wrapper {
    max-width: 1728px;
    margin: 0 auto;
    padding: 1em;
}


.home-hero {
   /* background: url(../img/main.webp) repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(../img/main.webp);
        background-size: cover;
        background-position: center;*/
    width:100%;
    height: auto;
    min-height: 100vh;

     
}


.hero-inner h1 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size: 5.5em;
    color: #FCB350;
}


.hero-inner h6 {
     font-family: 'Visby-Light', sans-serif;
    font-size: 2em;
    color: #fff;
}





.hero-inner {

    /*flex-direction: row;*/
   min-height: 100vh;
    height: auto;
      justify-content: center; /* horizontally center */
        align-items: center; /* vertically center */
    padding-top: 12vh;
   
}



.hero-inner img {
    width: 350px;
    height: auto;
}


.hero-inner-left {
   
   
}




.hero-inner-right {
    
    padding-top: 0%;
}


.my-expertise {
    margin: 0 auto 6em auto;
}


.expertise-inner {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   margin: 5em auto 0 auto;
    border-bottom: #fff 2px solid;
}

.expertise-inner h4 {
     color: #fff;
    font-size:37px;
    font-family: 'Visby-Light', sans-serif;  
}


.expertise-inner img {
    width: 57px;
    height: auto;
    margin-bottom: 15px;
     margin-top: 3px;
}




.white-btn a{
    width:250px;
    background-color: transparent;
    border-radius: 10px;
    border:#ffff solid 1px;
    padding: 20px 25px;
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 24px;
    text-align: left;
    margin-top: 5em;
    text-decoration: none;
}


.white-btn a:hover {
    background-color:#fff;
    border-radius: 10px;
    border:#ffff solid 1px;
     padding: 20px 25px;
    color:#111;
    font-family: 'Visby-Light', sans-serif;
    font-size:24px;
    text-align: left;
    transition: 0.2s;
    text-decoration: none;
}


.white-btn a svg{
   transition: 0.4s;
    width: 32px;
    height: 30px;
    fill:#fff!important;
    -webkit-transform: rotateZ(-60deg);
    -moz-transform: rotateZ(-60deg);
     transform: rotateZ(-60deg);
     margin-left: 40px;
}

.white-btn a:hover svg {
   transition: 0.4s; 
    fill:#111!important; 
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}


.main-footer {
    padding-bottom: 5em;
}

.main-footer h4 {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 32px;
    text-align: left;
}


.main-footer h6 {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 32px;
    text-align: left;
}

.main-footer p {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 14px;
    text-align: center;
}


/*.social-links {
    display: flex;
    justify-content: center;
    color:#fff!important;
    fill:#fff!important;
}*/


.main-footer img {
    width:  160px;
    height: auto;
}


.social-links {
    display: flex;
   
    
}

.social-links a {
    text-align: center;
    text-decoration: none;
    color:#fff;
    margin:5px 15px;
    font-size: 340%;
    font-weight: 200;
    line-height: 60px; 
      transition: color 0.5s;
}

.social-links a:hover{
     color:#FFDF00!important;
    transition: 0.5s;
    fill:#FFDF00!important;
}


.social-links a i:hover{
     color:#FFDF00!important;
     transition: 0.5s;
 
}




/*****ABOUT ME****/

.about-wrapper {
    padding-top:20vh;
}


.about-wrapper h6 {
  font-family: 'Visby-Light', sans-serif;
    font-size:1.7em;
    color: #fff; 
    line-height: 1.7em;
}


.clients-logo {
    margin-top: 25px;
}



.clients-logo ul li {
    display: inline-block;
}

.clients-logo ul li img {
    width:220px;
    height: auto;
    padding: 1.5em;
    border-radius: 6px;
    transition: 0.3s;
}


.clients-logo ul li img:hover {
   opacity: 0.5;
    transition: 0.3s;
}




/****CASE STUDIES*****/

.case {
    padding-top: 3em;
     padding-bottom: 6em;
}

.case-inside {
    width: 93%;
    margin-top: 2em;
}

.case img {
    border-radius: 20px;
     margin-top: 1em;
    margin-bottom: 1.3em;
    border:#fff solid 2px;
    transition: 0.3s;
}

.case img:hover{
    opacity: 0.6;
    cursor: pointer;
}

.case a img {
    text-decoration: none;
}

.case a img:hover {
    text-decoration: none;
}

.case h5 {
    color: #fff;
    padding-top: 0.5em;
    padding-bottom: 0.9em;
}


.sam-logo img {
    width: 200px;
    height: auto;
    
}


.website-header h4 {
    border-bottom: #ffff solid 1px;
    margin-bottom: 0.5em;
   
}


.website-header h6 {
   color: #FCB350;
   font-size: 1.5em;
   font-family: 'Visby-Medium', sans-serif; 
}

.website-header p {
    color: #ffff;
   font-size: 1.3em;
    font-family: 'Visby-Light', sans-serif;    
}


.persona {
    padding: 2em;
    border-radius: 30px;
    background-color: rgb(255,255,255,0.4);
}


.persona img {
    width: 300px;
    height: auto;
}

.persona h5 {
    font-size: 1.6em;
}

.persona h6 {
    color:#fff;
    font-size: 1.3em;
}

th {
   font-family: 'Visby-Light', sans-serif; 
    letter-spacing: 1px;
}

td {
  font-family: 'Visby-Light', sans-serif; 
    letter-spacing: 1px;  
}


/****WORKS*****/

.works h3 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:5em;
    color: #FCB350;
}

.works {
    margin-bottom: 4em;
}


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #FCB350;
    font-family: 'Visby-Medium', sans-serif; 
    font-size: 1.4em;
    transition: 0.6s;
}



.nav-pills .nav-link {
    font-family: 'Visby-Medium', sans-serif; 
    background: 0 0;
    border:#FCB350 2px solid;
    font-size: 1.4em;
    border-radius: 50px;
    padding: 30px 45px;
    color: #FCB350;
    transition: 0.6s;
}


.nav-pills .nav-link:hover {
    font-family: 'Visby-Medium', sans-serif; 
    background:#000;
    border:#FCB350 2px solid;
    font-size: 1.4em;
    border-radius: 50px;
    padding: 30px 45px;
    color: #FCB350;
    transition: 0.6s;
}


.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
   color: #fff;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    transition: 0.6s;
}



.nav-pills {
    --bs-nav-pills-border-radius: 50px;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg:#FCB350;
    
}


.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}


.work-container {
    width: 95%;
    margin-top: 6em;
     height:auto; 
    overflow: hidden;
  /* -- Prevent flicker -- */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0); 
}



.work-container img{
    max-width: 100%;
    border-radius: 20px;
  height: auto;
  display: block;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
    margin: 0 auto;
}



.work-container img:hover {
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);

}




.work-container-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: #fff solid 1px;
    padding-top: 2em;
     padding-bottom: 1em;
    align-items: center;
}

.work-container-inner-l {
    width: 70%;
}


.work-container-inner-l:hover {
   
}

.work-container-inner-l h5 {
  font-size: 2em;
    color:#fff;
}


.work-container-inner-r {
    width: 30%;
}


.work-container-inner p {
    border:#fff solid 1px;
    border-radius: 50px;
    padding: 10px 30px;
    background-color: transparent;
    float: right;
    margin-top: 1em;
    color:#fff;
}

.work-container-inner p a {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
  font-weight:400;
  font-size:100%;
    text-decoration: none;
}


.work-container-inner p a:hover {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
  font-weight:400;
  font-size:100%;
    text-decoration: none;
}



.my-thumbnail {
    position:relative;
    overflow:hidden;
      width: 100%;
    margin-top: 2em;
}

.my-thumbnail img {
    width: 100%;
    height:auto ;
    border-radius: 20px;
    transition: 0.2s;
}
 
.my-caption {
    position:absolute;
    top:-100%;
    right:0;
    background:rgba(0,0,0, 0.75);
    width:100%;
    height:100%;
    padding:2%;
      border-radius: 19px;
    text-align:center;
    color:#fff !important;
    z-index:2;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


.my-thumbnail:hover .my-caption {
    top:0%;
}

.my-caption2 {
     display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    height: 100%;
      
}


.my-caption2 h4 {
  font-family: 'Visby-Light', sans-serif;
  font-weight:300;
  font-size:150%;
  letter-spacing:0px;
  color: #fff;
    text-align: center;
}

.my-caption2 p a {
  font-family: 'Visby-Light', sans-serif;
  font-weight:300;
  font-size:100%;
  letter-spacing:0px;
    text-align: center;
  color: #fff;  
     text-decoration: none;
    border-bottom: #fff 1px solid;
}

.my-caption2 p a:hover {
  font-family: 'Visby-Light', sans-serif;
  font-weight:300;
  font-size:100%;
  letter-spacing:0px;
    text-align: center;
  color: #fff; 
    text-decoration: none;
    
}
 


.ui-header h2 {
    width: 100%;
    margin: 1.6em auto 1em auto;
   color: #FCB350;
    font-size:90px;
     font-family: 'Prettywise-Medium', sans-serif; 
    text-align:left;
   
}



.ui-header h3 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:60px;
    color: #FCB350;
     text-align:left;
    border-bottom: #FCB350 solid 1px;
    margin-bottom: 0.5em;
}


.ui-header h4 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:30px;
    color: #fff;
      text-align:left;
    margin-top: 0.4em;
}



.ui-header h5 {
     color: #fff;
    font-size:20px;
    font-family: 'Visby-Light', sans-serif;
    text-align:left;
    line-height: 2em;
}


.concept h5 {
     color: #fff;
    font-size:20px;
    font-family: 'Visby-Light', sans-serif;
    text-align:center;
    margin-top: 1em;
    margin-bottom: 3em;
}







@media (max-width: 1399.98px) {
   .hero-inner {
    display: block;
    flex-direction: row;
   min-height: 100vh;
    height: auto;
      justify-content: center; /* horizontally center */
        align-items: center; /* vertically center */
    padding-top: 10em;
   
}


.hero-inner-left {
    width: 90%;
   
}




.hero-inner-right {
     width: 100%;
    padding-top: 0%;
}
    
    
.case-inside {
    width: 93%;
    margin-top: 4em;
}    
    
 
    
}




@media (max-width: 1199.98px)  {
    
   .work-container-inner {
    display: block;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: none;
    padding-top: 2em;
     padding-bottom: 1em;
    align-items: center;
}

.work-container-inner-l {
    width: 90%;
}


.work-container-inner-l:hover {
   
}

.work-container-inner-l h5 {
  font-size: 1.8em;
    color:#fff;
}


.work-container-inner-r {
    width: 90%;
} 
    
}




@media (max-width: 991.98px) {
     .expertise-inner {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 5em auto 0 auto;
    border-bottom: #fff 2px solid;
}
  
    
.expertise-inner h4 {
     color: #fff;
    font-size:35px;
    font-family: 'Visby-Light', sans-serif;  
}


.expertise-inner img {
    width: 55px;
    height: auto;
    margin-bottom: 5px;
     margin-top: 3px;
} 
    
.clients-logo ul li img {
    width:160px;
    height: auto;
    padding: 1em;
    border-radius: 0px;
} 
    
.case-inside {
    width: 99%;
}
    
    
.work-container {
    width: 99%;
    margin-top: 6em;
     height:auto; 
    overflow: hidden;
  /* -- Prevent flicker -- */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0); 
}
    
 
    
    
    
 .ui-header h2 {
    width: 100%;
    margin: 1.6em auto 1em auto;
    font-size:60px;
    letter-spacing: 0.1em;
    text-align:left;
     color: #FCB350;
     font-family: 'Prettywise-Medium', sans-serif; 
}



.ui-header h3 {
    color: #FCB350;
     font-family: 'Prettywise-Medium', sans-serif; 
    font-size:50px;
    letter-spacing: 0.1em;
    text-align:left;
    border-bottom: #FCB350 solid 1px;
    margin-bottom: 0.5em;
   
}

.ui-header h4 {
     color: #fff;
    font-size:30px;
    letter-spacing: 0.1em;
     font-family: 'Prettywise-Medium', sans-serif;
    text-align:left;
    margin-top: 0.4em;
}

.ui-header h5 {
     color: #fff;
    font-size:20px;
    font-family: 'Visby-Light', sans-serif;
    text-align:left;
   
}   
     
 .concept h5 {
     color: #fff;
    font-size:20px;
    font-family: 'Visby-Light', sans-serif;
    text-align:center;
    margin-top: 1em;
    margin-bottom: 3em;
}
    
    
 .about-wrapper {
    padding-top:10em;
}    
    
    
 
}





@media (max-width: 767.98px) {
    
 
 .case {
    padding-top: 1em;
     padding-bottom: 4em;
}
    
    
}



@media (max-width: 575.98px) {
    
    .hero-inner img {
    width: 250px;
    height: auto;
}

    
    
    
    
    h2 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size: 4em;
   
    color: #FCB350;
}


h3 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:3.2em;
    color: #FCB350;
}


h4 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:2.8em;
    color: #FCB350;
}


h5 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:2.3em;
    color: #FCB350;
}


h6 {
    font-family: 'Visby-Light', sans-serif;
    font-size:2em;
    color: #fff;
}
    
    
    .hero-inner h1 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size: 3.7em;
    color: #FCB350;
}
    
    
  .expertise-inner h4 {
     color: #fff;
    font-size:20px;
    font-family: 'Visby-Light', sans-serif;  
}


.expertise-inner img {
    width: 40px;
    height: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}   
    
    
.clients-logo ul li {
    display: inline-block;
}

.clients-logo ul li img {
    width:90px;
    height: auto;
    padding: 0.5em;
    border-radius: 0px;
}    
 
    
.sam-logo img {
    width: 120px;
    height: auto;
    
}    
  
    
    
    

.main-footer h4 {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 24px;
    text-align: left;
}

.main-footer h6 {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 20px;
    text-align: left;
}

.main-footer p {
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 14px;
    text-align: center;
}
    
      
    
    
    
.ui-header h2 {
    width: 100%;
    margin: 2.6em auto 1em auto;
    font-size:50px;
    letter-spacing: 0em;
    color: #FCB350;
     font-family: 'Prettywise-Medium', sans-serif; 
    text-align:left;
   
}



.ui-header h3 {
   
    font-size:28px;
    letter-spacing: 0.1em;
    color: #FCB350;
     font-family: 'Prettywise-Medium', sans-serif; 
    text-align:left;
    border-bottom: #FCB350 solid 1px;
    margin-bottom: 0.5em;
   
}

.ui-header h4 {
     color: #fff;
    font-size:24px;
    letter-spacing: 0.1em;
     font-family: 'Prettywise-Medium', sans-serif; 
    text-align:left;
    margin-top: 0.4em;
}

.ui-header h5 {
     color: #fff;
    font-size:17px;
    font-family: 'Visby-Light', sans-serif;
    text-align:left;
   
}
    
    
 .concept h5 {
     color: #fff;
    font-size:17px;
    font-family: 'Visby-Light', sans-serif;
    text-align:center;
    margin-top: 1em;
}
     
  
    
.social-links a {
    text-align: center;
    text-decoration: none;
    color:#fff;
    margin:5px 10px;
    font-size: 280%;
    font-weight: 200;
    line-height: 60px; 
      transition: color 0.5s;
}
 
    
    
 .works h3 {
     font-family: 'Prettywise-Medium', sans-serif;  
    font-size:4em;
    color: #FCB350;
}   
    
    
    
.works {
    margin-bottom: 2em;
}    
    
    
    
 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #FCB350;
    font-family: 'Visby-Medium', sans-serif; 
    font-size: 1.1em;
    transition: 0.6s;
     margin-top: 1em;
}



.nav-pills .nav-link {
    font-family: 'Visby-Medium', sans-serif; 
    background: 0 0;
    border:#FCB350 2px solid;
    font-size: 1.1em;
    border-radius: 50px;
    padding: 20px 30px;
    color: #FCB350;
    transition: 0.6s;
      margin-top: 1em;
}
  
    
    
 .persona {
    padding: 2em 1em;
    border-radius: 30px;
    background-color: rgb(255,255,255,0.4);
}
   
    
 
    
 .white-btn a{
    width:200px;
    background-color: transparent;
    border-radius: 10px;
    border:#ffff solid 1px;
    padding: 15px 25px;
    color:#fff;
    font-family: 'Visby-Light', sans-serif;
    font-size: 20px;
    text-align: left;
    margin-top: 5em;
    text-decoration: none;
}


.white-btn a:hover {
    background-color:#fff;
    border-radius: 10px;
    border:#ffff solid 1px;
     padding: 15px 25px;
    color:#111;
    font-family: 'Visby-Light', sans-serif;
    font-size:20px;
    text-align: left;
    transition: 0.2s;
    text-decoration: none;
}

   
    
    
    
    
    
}















.cursor
{
	position: fixed;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: 0.1s;
	transform: translate(-50%,-50%);
	pointer-events: none;
	mix-blend-mode: difference;
}
.hero-inner-left  h1:hover ~ .cursor
{
	transform: scale(6);
	
}