@charset "utf-8";
/*------------------------------------------------------------------
[Master Stylesheet]

Project: Resonance
Version: 1.0.3
Last change: 26 November 2023
Primary use: Multipurpose Template  
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
[Table of contents]

1. Icon fonts.
2. Variables.
3. Common styles.
4. Page loader.
5. Typography.
    5.1. Headings styles.
6. Links.
7. Buttons.
    7.1. Mobile menu button fix.
8. Forms fields.
    8.1. Input underline.
    8.2. Input Gradient.
9. Home sections.
    9.1. Header common styles.
    9.2. Scroll down icon.
    9.3. Scroll down icon type 1.
    9.4. Scroll down icon type 2.
    9.5. Scroll down type 3.
    9.6. Scroll down icon type 4.
    9.7. Home section status.
    9.8. Home section social media links.
    9.9. HTML5 BG Video.
    9.10. Section edge figure.
    9.11. Section BG svg shape.
    9.12. Fullwidth gallery.
    9.13. Typed text.
    9.14. Stack Images.
10. Custom appear animation.
    10.1. Splitting JS chars animation.
    10.2. Splitting JS chars animation 1.
    10.3. Splitting JS chars animation 2.
    10.4. Splitting JS chars animation long.
    10.5. Splitting JS chars animation long 1.
    10.6. Splitting JS words animation.
    10.7. Splitting JS lines animation.
    10.8. Splitting JS lines animation long.
    10.9. Appearing animation styles.
11. Classic menu bar.
    11.1. Logo (in navigation panel).
    11.2. Menu sub.
    11.3. Menu sub multi.
    11.4. Mobile nav.
    11.5. Mobile nav menu sub.
    11.6. Mobile nav menu sub multi.
    11.7. Dark panel style.
    11.8. Transparent panel style.
    11.9. Menu social links.
12. Sections styles.
    12.1. Common section styles.
    12.2. Decorative elements.
    12.3. Marquee text line.
13. Split section.
14. Services.
15. Services 2.
16. Services 3.
17. Services 4.
18. Services 5.
19. Services 6.
20. Services 7.
21. Services 8.
22. Team.
23. Team 1.
24. Features.
25. Features 1.
26. Features 2.
27. Alt features.
28. Spot box.
29. Numbers.
    29.1. Numbers 1.
    29.2. Numbers 2.
    29.3. Numbers 3.
30. Steps.
    30.1. Steps 1.
    30.2. Steps 2.
31. Portfolio.
    31.1. Works filter.
    31.2. Works grid.
32. Portfolio 1.
33. Portfolio 2.
34. Portfolio 3.
35. Portfolio 4.
36. Portfolio 5.
37. Call action 1 section.
38. Call action 2 section.
39. Call action 3 section.
40. Call action 4 section.
41. Images compositions.
    41.1. Images composition 1.
    41.2. Images composition 2.
    41.3. Images composition 3.
    41.4. Images composition 4.
    41.5. Images composition 5.
    41.6. Images composition 6.
    41.7. Images composition 7.
    41.8. Images composition 8.
    41.9. Images composition 9.
42. Work process.
43. Logotypes.
    43.1. Logo carousel.
    43.2. Logo grid.
44. Post previews.
45. Post previews 1.
46. Post previews 2.
47. Post previews 3.
48. Newsletter.
    48.1. Newsletter elegant.
    48.2. Newsletter strong.
    48.3. Newsletter modern.
49. Contact.
50. Contact 1.
51. Contact 2.
52. Google maps.
53. Footer.
54. Footer 1.
55. Footer 2.
56. Blog.
    56.1. Pagination.
    56.2. Comments.
    56.3. Sidebar.
57. Pricing.
58. Shortcodes.
    58.1. Lightbox modal.
    58.2. Owl carousel.
    58.3. Testimonials 4.
    58.4. Testimonials 5.
    58.5. Testimonials 6.
    58.6. Tabs.
    58.7. Tabs minimal.
    58.8. Tabs alternative.
    58.9. Tooltips.
    58.10. Alert messages.
    58.11. Accordion.
    58.12. Toggle.
    58.13. Accorfion style 1.
    58.14. Progress bars.
    58.15. Alt progress bars.
    58.16. Icons examples.
    58.17. Morphext.
59. Skip to content link.
60. Cookies.
61. Intro page.
-------------------------------------------------------------------*/


/* ==============================
   Icon fonts
   ============================== */
  


/* ==============================
   Variables
   ============================== */
  
:root{
   
    --full-wrapper-margin-x: 30px;
    --container-width: 1350px;
    --section-padding-y: 120px;
    --menu-bar-height: 85px;
    --menu-bar-height-scrolled: 65px;
    --color-dark-1: #010101;
    --color-dark-2: #171717;
    --color-dark-3: #272727;
    --color-dark-3a: #333;
    --color-dark-4: #555;
    --color-gray-1: #757575;
    --color-gray-2: #888;
    --color-gray-3: #999;
    --color-gray-light-1: #f1f1f1;
    --color-gray-light-2: #f7f7f7;
    --color-gray-light-3: #e5e5e5;
    --color-gray-light-4: #d5d5d5;
    --color-gray-light-5: #ccc;
    --color-gray-light-6: #bbb;
    --color-dark-mode-gray-1: rgba(255,255,255, .7);
    --color-dark-mode-gray-2: rgba(255,255,255, .1275);
    --color-primary-1: #4567ed;
    --color-primary-1-a: #375ae3;    
    --color-primary-light-1: #e3effe;
    --color-primary-light-1-a: #bcd1f1;
    --color-primary-2: #7752e7;
    --color-primary-light-2: #e7defe;
    --color-primary-3: #b947d9;
    --color-primary-light-3: #f7defe;
    --color-primary-4: #e748b1;
    --color-primary-light-4: #ffe1f5; 
    --color-secondary-1: #fbe3a1;   
    --gradient-primary-1: linear-gradient( 90deg, var(--color-primary-4) 0%, var(--color-primary-3) 33%, var(--color-primary-2) 67%, var(--color-primary-1) 100%);
    --gradient-primary-1-a: linear-gradient( 90deg, var(--color-primary-4) 25%, var(--color-primary-3) 40%, var(--color-primary-2) 60%, var(--color-primary-1) 75%);
    --gradient-primary-1-b: linear-gradient( 45deg, var(--color-primary-4) 0%, var(--color-primary-3) 33%, var(--color-primary-2) 67%, var(--color-primary-1) 100%);
    --gradient-primary-1-c: linear-gradient( 0deg, var(--color-primary-4) 0%, var(--color-primary-3) 33%, var(--color-primary-2) 67%, var(--color-primary-1) 100%);
    --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
    --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
    --gradient-dark-alpha-1: linear-gradient( 90deg, var(--color-dark-1) 40%, transparent 87%);
    --gradient-dark-alpha-2: linear-gradient( 90deg, transparent 13%, var(--color-dark-1) 60%);
    --gradient-primary-alpha-1: linear-gradient( 90deg, var(--color-primary-1) 40%, transparent 87%);
    --gradient-primary-alpha-2: linear-gradient( 90deg, transparent 13%, var(--color-primary-1) 60%);
    --border-radius-default: 4px;
    --border-radius-large: 30px;
    --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05),0px 1px 1px 0px rgba(0, 0, 0, 0.03),0px 3px 5px 0px rgba(0, 0, 0, 0.03);
    --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08),0px 1px 1px 0px rgba(0, 0, 0, 0.06),0px 3px 5px 0px rgba(0, 0, 0, 0.06);
    --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
    --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);  
    --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    --ease-default: cubic-bezier(0, 0, 0.58, 1);
    --ease-out-long: cubic-bezier(0,.5,0,1);
    --ease-out-medium: cubic-bezier(0,.57,.55,1);
    --ease-out-short: cubic-bezier(.15,.7,.78,1);
    --ease-elastic-1: cubic-bezier(0.68,-0.55,0.27,1.55);
    --ease-elastic-2: cubic-bezier(0.68,-3,0.27,5);
}


/* ==============================
   Common styles
   ============================== */
  
:root{
    scroll-behavior: auto;
}
html{
    -ms-overflow-style: scrollbar;
}
body{
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;    
}
main{
    overflow: clip;
}
iframe{
    border: none;
}
a, b, div, ul, li{
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-tap-highlight-color: transparent; 
    -moz-outline-: none;
}
a:focus:not(.focus-visible),
a:active,
section:focus,
div:active,
div:focus{
    -moz-outline: none;
    outline: none;
}
a:focus.focus-visible,
button:focus.focus-visible,
div:focus.focus-visible{
    -moz-outline: 3px dotted #36a367 !important;
    outline: 3px dotted #36a367 !important;
    outline-offset: 0 !important;
}
img:not([draggable]), embed, object, video{
    max-width: 100%;
    height: auto;
}
.image-fullwidth img{
    width: 100%;
    height: auto;
}
.min-height-80vh{
    min-height: 80vh;
}
.min-height-90vh{
    min-height: 90vh;
}
.min-height-100vh{
    min-height: 100vh !important;
    min-height: 100svh !important;
}
.align-center{ text-align:center !important; }
.left{ float:left !important; }
.right{ float:right !important; }
.hidden{ display:none !important;}
.relative{ position: relative !important;}
.z-index-1{ z-index: 1 !important;}
.z-index-n1{ z-index: -1 !important;}
.no-hover{ cursor: default !important;}
.wch-unset{ will-change: unset !important; }
.white{ color: #fff !important; }
.black{ color: var(--color-dakr-1) !important; }
.color-primary-1{ color: var(--color-primary-1) !important; }
.color-primary-2{ color: var(--color-primary-2) !important; }
.color-primary-3{ color: var(--color-primary-3) !important; }
.color-primary-4{ color: var(--color-primary-4) !important; }
.color-secondary-1{ color: var(--color-secondary-1) !important; }
.opacity-003{ opacity: .03 !important; }
.opacity-004{ opacity: .04 !important; }
.opacity-005{ opacity: .05 !important; }
.opacity-006{ opacity: .06 !important; }
.opacity-007{ opacity: .07 !important; }
.opacity-008{ opacity: .08 !important; }
.opacity-009{ opacity: .09 !important; }
.opacity-01{ opacity: .1 !important; }
.opacity-015{ opacity: .15 !important; }
.opacity-02{ opacity: .2 !important; }
.opacity-025{ opacity: .25 !important; }
.opacity-03{ opacity: .3 !important; }
.opacity-035{ opacity: .35 !important; }
.opacity-04{ opacity: .4 !important; }
.opacity-045{ opacity: .45 !important; }
.opacity-05{ opacity: .5 !important; }
.opacity-055{ opacity: .55 !important; }
.opacity-06{ opacity: .6 !important; }
.opacity-065{ opacity: .65 !important; }
.opacity-07{ opacity: .7 !important; }
.opacity-075{ opacity: .75 !important; }
.opacity-08{ opacity: .8 !important; }
.opacity-085{ opacity: .85 !important; }
.opacity-09{ opacity: .9 !important; }
.opacity-095{ opacity: .95 !important; }
.opacity-1{ opacity: 1 !important; }
.size-13 { font-size: 13.5px !important; }
.size-14{ font-size: 14px !important; }
.size-15{ font-size: 15px !important; }
.size-16{ font-size: 16px !important; }
.size-17{ font-size: 17px !important; }
.size-18{ font-size: 18.5px !important; }
.size-20{ font-size: 20px !important; }
.size-22{ font-size: 22px !important; }
.size-24{ font-size: 24px !important; }
.box-shadow{ box-shadow: var(--box-shadow-block) !important;}
.box-shadow-strong{ box-shadow: var(--box-shadow-block-strong) !important;}
.border-color-primary-1{
    border: 1px solid var(--color-primary-1);
}
.border-color-primary-2{
    border: 1px solid var(--color-primary-2);
}
.border-color-primary-3{
    border: 1px solid var(--color-primary-3);
}
.border-color-primary-4{
    border: 1px solid var(--color-primary-4);
}
.border-dark{
    border: 1px solid var(--color-dark-mode-gray-2) !important;
}
.bg-border-dark{
    background: var(--color-dark-3) !important;
    border: 1px solid var(--color-dark-mode-gray-2) !important;
}
.stick-fixed{
    position: fixed !important;
    top: 0;
    left: 0;
}
.block-sticky{
    position: sticky;
    top: calc(var(--menu-bar-height-scrolled) + 40px);
    left: 0;
}
.round{
    border-radius: var(--border-radius-default) !important;
}
.round-large{
    border-radius: var(--border-radius-large) !important;
}
.circle{
    border-radius: 100px !important;
}
.circle-large{
    border-radius: 700px !important;
}
.round.overflow-hidden,
.round-large.overflow-hidden,
.circle.overflow-hidden,
.circle-large.overflow-hidden{
    isolation: isolate;
    transform: translateZ(0);
}
::selection{
    color: #fff;
    background: var(--color-primary-1);
}
.light-content ::selection{
    color: #fff;
    background: var(--color-primary-1);
}
.animate, .animate *{
    transition: var(--transition-default);
}
.parallax-mousemove{
   transition: var(--transition-default);
   -moz-transition: none !important;
   will-change: transform;
}
.parallax-mousemove-follow{
    -moz-transition: none !important;
}
@media not all and (min-resolution:.001dpcm) { @media {
    .parallax-mousemove,
    .parallax-mousemove-follow{
       transition: none !important;
    }
}}
[data-rellax-x]{
    transition: transform 0.25s var(--ease-out-short);
    transition-delay: 0.0025s;
    will-change: transform;
}
[data-rellax-y]{
    transition: transform 0.25s cubic-bezier(0, 0, 0.58, 1);
    transition-delay: 0.0025s;
    will-change: transform;
}
.no-animate{    
    -webkit-transition-property: none !important;
    -moz-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important; 
}
.clearlist, .clearlist li{
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
}
.clearlinks a{
    text-decoration: none;
    color: unset;
}
.clearlinks a:hover{
    color: unset !important;
}
.full-wrapper{
    margin: 0 var(--full-wrapper-margin-x);
}
.container{
    max-width: var(--container-width);
    padding: 0 30px;
}
.row:not(
.g-0, .g-1, .g-2, .g-3, .g-4, .g-5,
.gx-0, .gx-1, .gx-2, .gx-3, .gx-4, .gx-5,
.gy-0, .gy-1, .gy-2, .gy-3, .gy-4, .gy-5){
    --bs-gutter-x: 30px;
}
.row.gx-huge{
    --bs-gutter-x: 276px;
}
.icon-ellipse{
    position: relative;
    top: -0.085em;
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    background: currentColor;
    border-radius: 50%;
}
.text-outline-cont{
    position: relative;
    display: inline-block;
}
.text-outline{
    position: relative;
}
.text-outline-1{
    position: absolute;
    top: -0.36em;
    left: 0;
    color: #fff;
    -webkit-text-stroke: 1px var(--color-dark-1);
    opacity: .2;
    pointer-events: none;
}
.text-outline-2{
    position: absolute;
    top: -0.72em;
    left: 0;
    color: #fff;
    -webkit-text-stroke: 1px var(--color-dark-1);
    opacity: .1;
    pointer-events: none;
}
.light-content .text-outline-1{
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    opacity: .17;
}
.light-content .text-outline-2{
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    opacity: .07;
}
.page-section,
.small-section,
.bg-image{
    width: 100%;
    display: block;    
    position: relative;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;    
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}
.small-section{
    padding: 100px 0;
}




/* ==============================
   Portfolio 1
   ============================== */

.portfolio-1-item{
    will-change: unset !important;
}
.portfolio-1-image{
    position: relative;
    clip-path: inset(0);
    transform: translateZ(0);
    transition: all 2s var(--ease-out-medium);
    will-change: clip-path;
}
.portfolio-1-image:hover{
    clip-path: inset(10px);
}
.portfolio-1-image-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gray-light-2);
}
.portfolio-1-title{
    position: relative;
    margin-left: -105px;
    font-size: 82px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.05em;
}
.portfolio-1-title a{
    display: inline-block;
    margin-left: -4px;
    color: unset;
    text-decoration: none;
    transition: letter-spacing .27s var(--ease-out-medium);
    will-change: letter-spacing;
}
.portfolio-1-title a:hover{
    letter-spacing: -0.03em;
}
.portfolio-1-descr{
    font-size: 16px;
}


/* ==============================
   Portfolio 2
   ============================== */
  
.portfolio-2-item{
    will-change: unset !important;
}
.portfolio-2-title{
    font-size: 43px;
    font-weight: 500;    
}
.portfolio-2-title a{
    display: block;
    text-decoration: none;
    transition: all .27s var(--ease-out-medium);
}
.portfolio-2-title a:hover{
    color: inherit;
    text-decoration: none;
}
.portfolio-2-image{
    overflow: hidden;
}
.portfolio-2-image img{
    width: 100%;    
    transform: scale(1.02) translateZ(0.1px);
    transition: all .5s var(--ease-out-short);
}
.portfolio-2-image a:hover img{
    transform: translateZ(0.1px);
}
.light-content .portfolio-2-title a{
    color: #fff;
}

/* ==============================
   Portfolio 3
   ============================== */
  
.portfolio-3-image{
    overflow: hidden;
    border-radius: 50px;
    isolation: isolate;
    transform: translateZ(0);
}
.portfolio-3-image img{
    width: 100%;    
    transform: scale(1.037) translateZ(0.01px);
    transition: all .5s var(--ease-out-short);
}
.portfolio-3-image a:hover img{
    transform: translateZ(0.01px);
}
.portfolio-3-title{
    margin-bottom: 15px;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.portfolio-3-title a{
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 calc(100% - 0.125em);
    background-repeat: no-repeat;
    transition: background-size .5s var(--ease-out-medium);
    will-change: background-size;
}
.portfolio-3-title a:hover{
    color: inherit;
    background-size: 100% 1px;
}
.portfolio-3-descr{
    font-size: 13px;
    line-height: 1.2; 
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.light-content .portfolio-3-title a{
    color: #fff;
}


/* ==============================
   Portfolio 4
   ============================== */

.portfolio-4-carousel.owl-carousel{
    display: flex !important;
    flex-direction: column;
    width: calc(100% + 10px);
}
.portfolio-4-carousel .owl-wrapper-outer{
    overflow: visible !important;
}
.portfolio-4-carousel .owl-item{
    padding-right: 10px;
}
.portfolio-4-carousel .owl-controls{
    order: 2;
    margin-top: 40px;
}
.portfolio-4-carousel .owl-buttons{
    padding-right: 10px;
    text-align: right;
}
.portfolio-4-carousel .owl-pagination{
    display: none;
}
.portfolio-4-carousel .owl-prev,
.portfolio-4-carousel .owl-next{
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-left: 10px;
    padding: 0;
    font-size: 24px;
    text-align: center;
    color: var(--color-dark-1);
    border-radius: 50%;
    opacity: 1;
    transform: none;
}
.portfolio-4-carousel .owl-prev svg,
.portfolio-4-carousel .owl-next svg{
    position: relative;
}
.portfolio-4-carousel .owl-prev:before,
.portfolio-4-carousel .owl-next:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
    transition: all 0.4s var(--ease-elastic-2);
}
.portfolio-4-carousel .owl-prev:hover:before,
.portfolio-4-carousel .owl-next:hover:before{
    box-shadow: var(--box-shadow-strong);
    transform: scale(1.07);
}
.portfolio-4-item > a{
    color: unset;
    text-decoration: none;
}
.portfolio-4-image{
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: var(--border-radius-default);
    isolation: isolate;
    transform: translateZ(0);
}
.portfolio-4-image img{
    position: relative;
    transition: all .5s var(--ease-out-short);
}
.portfolio-4-title{
   margin-bottom: 0;
   font-size: 24px;
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -0.02em;
}
.portfolio-4-intro{ 
   padding-right: 12px;
   transition: all .5s var(--ease-out-short);
}
.portfolio-4-descr{
    font-size: 16px;
}

/* Hover state */
.portfolio-4-item > a:hover .portfolio-4-image > img{
    transform: scale(1.05);
}
.portfolio-4-item > a:hover .portfolio-4-intro{
    transform: translateX(12px);
}


/* ==============================
   Portfolio 5
   ============================== */

.portfolio-5-link{
     text-decoration: none;
}
.portfolio-5-image{
    position: relative;
    margin-bottom: 22px;
    overflow: hidden;
    border-radius: var(--border-radius-default);
    isolation: isolate;
    transform: translateZ(0);
}
.portfolio-5-image-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-default);
    background: var(--color-gray-light-1);
}
a.portfolio-5-link .portfolio-5-image img{
    transform: translateZ(0.01px);
    transition: all 0.5s var(--ease-out-short);
}
.portfolio-5-title{
    margin-bottom: 18px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    transition: all .27s var(--ease-default);
}
.portfolio-5-title span{
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .5s var(--ease-out-medium);
    will-change: background-size;
}
.portfolio-5-number{
    margin-bottom: 5px;
    font-size: 54px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.portfolio-5-number-descr{
    font-size: 18px;
}
.light-content .portfolio-5-image-bg{
    background: var(--color-dark-3);
}

/* Hover state */

a.portfolio-5-link{
    text-decoration: none;
    color: inherit;
}
a.portfolio-5-link:hover .portfolio-5-image img{
    transform: scale(1.05) translateZ(0.01px);
}
a.portfolio-5-link:hover .portfolio-5-title span{
    background-size: 100% 1px;
}




/*

  
.portfolio-3-image{
    overflow: hidden;
    border-radius: 50px;
    isolation: isolate;
    transform: translateZ(0);
}
.portfolio-3-image img{
    width: 100%;    
    transform: scale(1.037) translateZ(0.01px);
    transition: all .5s var(--ease-out-short);
}
.portfolio-3-image a:hover img{
    transform: translateZ(0.01px);
}
.portfolio-3-title{
    margin-bottom: 15px;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.portfolio-3-title a{
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 calc(100% - 0.125em);
    background-repeat: no-repeat;
    transition: background-size .5s var(--ease-out-medium);
    will-change: background-size;
}
.portfolio-3-title a:hover{
    color: inherit;
    background-size: 100% 1px;
}
.portfolio-3-descr{
    font-size: 13px;
    line-height: 1.2; 
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.light-content .portfolio-3-title a{
    color: #fff;
}

*/