8889841c/*------------------------------------*\ #Testimonial \*------------------------------------*/ .testimonial { padding-top : 90px; padding-bottom: 85px; @media #{$maxSmall} { padding-top : 70px; padding-bottom: 70px; } .testimonial-panel { @media #{$maxSmall} { max-width : 370px; margin-right: auto; margin-left : auto; } .testimonial-body { position: relative; display : flex; @media #{$maxTablet} { flex-direction: column; align-items : center; } .testimonial-img { margin-right : 40px; width : 63px; height : 63px; flex-shrink : 0; padding : 5px; border : 2px solid var(--global--color-primary); border-radius: 50%; overflow : hidden; display : flex; img { max-width : 100%; border-radius: 50%; } @media #{$noteBook} { margin-right: 25px; } @media #{$maxTablet} { margin-bottom: 30px; margin-right : 0; } } .testimonial-content { @media #{$maxTablet} { text-align: center; } p { font-family : var(--global--font-heading); color : var(--global--color-white); font-size : 24px; font-weight : 500; line-height : 39px; margin-bottom: 21px; font-style : italic; @media #{$noteBook} { font-size : 22px; line-height: 1.5; } } .testimonial-meta { position : relative; display : flex; align-items: center; @media #{$maxTablet} { justify-content: center; } h6 { font-family : var(--global--font-body); font-size : 14px; line-height : 28px; font-weight : 700; color : var(--global--color-white); text-transform: capitalize; margin-bottom : 0; &:after { content : ','; margin-right: 4px; } } p { font-family : var(--global--font-body); color : var(--global--color-gray); font-size : 14px; font-weight : 400; line-height : 23px; text-transform: capitalize; margin-bottom : 0; } } } } &.testimonial-panel-2 { .testimonial-body { .testimonial-content { p { font-weight : 600; font-size : 25px; line-height : 41px; margin-bottom: 39px; font-style : normal; color : var(--global--color-secondary); @media #{$noteBook} { font-size : 20px; line-height: 35px; } @media #{$maxSmall} { font-size : 20px; line-height: 35px; } } } } } } .testimonial-thumbs { display : flex; align-items: center; @media #{$maxTablet} { justify-content: center; } @media #{$maxSmall} { flex-direction: column; } .testimonial-thumb { display : flex; align-items : center; opacity : 0.5; transition : 0.3s ease-in-out; margin-right: 40px; cursor : pointer; &:last-child { margin-right: 0; } @media #{$maxTablet} { margin-right: 20px; } @media #{$maxSmall} { margin-right : 0; margin-bottom: 20px; } &.active { opacity: 1; .thumb-img { border-color: var(--global--color-primary); } } .thumb-img { margin-right : 15px; width : 63px; height : 63px; flex-shrink : 0; padding : 5px; border : 2px solid transparent; transition : 0.3s ease-in-out; border-radius: 50%; overflow : hidden; display : flex; img { max-width : 100%; border-radius: 50%; } } .thumb-body { h6 { font-family : var(--global--font-body); font-weight : 700; font-size : 14px; line-height : 20px; color : var(--global--color-secondary); text-transform: capitalize; margin-bottom : 0; } p { text-transform: capitalize; font-size : 14px; line-height : 23px; color : var(--global--color-body); } } } } &.testimonial-1 { .owl-stage-outer { overflow: hidden; @media #{$minLarge} { &::before { content : ''; height : 100%; width : 40%; top : 0; right : 0; position : absolute; background-image: linear-gradient(90deg, #00000000 2%, var(--global--color-heading) 22%); opacity : 0.96; z-index : 5; } } } .carousel-dots { position: relative; .owl-nav { @media #{$maxTablet} { display: none; } span { font-size: 0; } .owl-next:before, .owl-prev:before { color : rgba(255, 255, 255, 0.5); font-family: "carousel" !important; font-size : 44px; transition : 0.3s ease-in-out; } .owl-prev:before { content: "\e990"; } .owl-next:before { content: "\e991"; } .owl-next, .owl-prev { position : absolute; top : 50%; transform: translateY(-50%); &:hover { &::before { color: white; } } } .owl-next { right: 30px; } .owl-prev { display: none; } } .owl-item { opacity: 1; } .owl-dots { margin-top: 16px; } } } &.testimonial-2 { padding-bottom: 0; @media #{$maxTablet} { padding-top: 190px; } } &.testimonial-3 { padding-top : 460px; padding-bottom : 110px; background-position: top center; @media #{$maxTablet} { padding-bottom: 70px; } .counters-holder { @media #{$maxTablet} { margin-bottom: 30px; text-align : center; } .counter { @media #{$minLarge} { padding-top: 30px; } .counter-desc { p { color: var(--global--color-secondary); &::after { background-color: var(--global--color-secondary); } } } } } .owl-stage-outer { overflow: hidden; .owl-item { opacity: 1; } } } &.testimonial-4 { position : relative; padding-top : 80px; padding-bottom: 110px; @media #{$maxTablet} { padding-top : 40px; padding-bottom: 70px; } .testimonial-overlay { background-color : #F6F7F8; background-position: top center; position : absolute; top : 0; left : 50%; transform : translateX(-50%); height : 100%; width : calc(100% - 7%); border-radius : 12px; z-index : 0; @media #{$maxTablet} { width: calc(100% - 4%); } } .counters-holder { position: relative; z-index : 1; @media #{$maxTablet} { margin-bottom: 30px; text-align : center; } .counter { @media #{$minLarge} { padding-top: 30px; } .counter-desc { p { color: var(--global--color-secondary); &::after { background-color: var(--global--color-secondary); } } } } } .owl-stage-outer { overflow: hidden; .owl-item { opacity: 1; } } .testimonial-thumbs { position: relative; z-index : 1; } } &.testimonial-5 { padding-top : 0px; padding-bottom : 100px; background-position: top center; overflow : visible; @media #{$maxTablet} { padding-bottom: 70px; } .contact-panel { transform : translateY(-60px); margin-top : -60px; margin-bottom: 30px; .contact-card { .contact-body { .btn { width: 270px; } .form-control { margin-bottom: 30px; } textarea { height : 127px; padding-top: 20px; } } } } .counters-holder { @media #{$maxTablet} { margin-bottom: 30px; text-align : center; } .counter { @media #{$minLarge} { padding-top: 30px; } .counter-desc { p { color: var(--global--color-secondary); &::after { background-color: var(--global--color-secondary); } } } } } .owl-stage-outer { overflow: hidden; .owl-item { opacity: 1; } } } }