/*
Theme Name: Jubilee
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Jubilee is specially designed product packaged for online course websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --primary-color: #EC6C5A;
  --light-primary-color: #E2F3F0;
  --secondary-color: #EC6C5A;
  --light-secondary-color: #FFE9E5;
  --tertiary-color: #FFEED3;
  --dark-color: #31333A;
  --light-color: #FFFFFF;
  --grey-color: #BBC7D4;
  --light-dark-color: #727272;
  --light-grey-color: #f5f5f5;
}

/* Fonts */
:root {
  --body-font: 'Inter', sans-serif;
  --heading-font: 'Inter', sans-serif;
}

body {

  --bs-link-color: var(--dark-color);
  --bs-link-hover-color: var(--dark-color);

  --bs-link-color-rgb: 40, 40, 40;
  --bs-link-hover-color-rgb: 0, 0, 0;

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: var(var(--body-font));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.3rem;
  --bs-body-color: var(--dark-color);

  --bs-primary: #4CC082;
  --bs-primary-rgb: 76, 192, 130;
  --bs-primary-bg-subtle: #E2F3F0;

  --bs-border-color: #F7F7F7;

  --bs-secondary: #EC6C5A;
  --bs-secondary-rgb: 236, 108, 90;
  --bs-secondary-bg-subtle: #FFE9E5;

  --bs-tertiary: #f8be60;
  --bs-tertiary-bg-subtle: #FFEED3;

}

.btn {
  --bs-btn-font-family: var(--heading-font);
}

.btn-primary {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 60px;
  transition: all 0.3s ease-in;
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #46ad76;
  --bs-btn-hover-border-color: #46ad76;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--light-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--light-color);
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-outline-primary {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 60px;
  transition: all 0.3s ease-in;
  --bs-btn-color: var(--primary-color);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--primary-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-gradient: none;
}

.btn-outline-dark {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease-in;
}

.btn-dark {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease-in;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dark-color);
  --bs-btn-border-color: var(--dark-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dark-color);
  --bs-btn-active-border-color: var(--dark-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--dark-color);
  --bs-btn-disabled-border-color: var(--dark-color);
}

/* body {
  letter-spacing: 0.01625rem;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--bs-body-color);
  font-weight: 700;
  text-transform: capitalize;
}

a {
  text-decoration: none;
}

.breadcrumb {
  --bs-breadcrumb-item-active-color: var(--dark-color);
}

.form-control {
  border: 1px solid #e4e3e3;
}

.form-control:focus {
  border-color: #949494;
  outline: 0;
  box-shadow: none;
}

.padding-large {
  padding-top: 18rem;
  padding-bottom: 14rem;
}

.padding-medium {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.padding-medium-2 {
  padding-top: 11rem;
  padding-bottom: 8rem;
}

@media only screen and (max-width: 768px) {
  .padding-large {
    padding-top: 10rem;
    padding-bottom: 5rem;
  }

  .padding-medium {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .padding-medium-2 {
    padding-top: 12rem;
    padding-bottom: 6rem;
  }
}


/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {

  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--primary-color);
  }

  40% {
    box-shadow: 0 2em 0 0 var(--primary-color);
  }
}


@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

}



/*----- Nav Section Style -------------------------*/
/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.nav-link {
  color: var(--dark-color);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* dropdown style */
.dropdown-item {
  text-transform: uppercase;
  /*font-weight: 700;
  padding: 0.5rem 1rem;*/

}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--body-text-color);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--light-grey-color);
}


/*----- Feature Section Style -------------------------*/

.feature-item {
  box-shadow: 4px 4px 10px rgba(150, 150, 150, 0.192);
  background: var(--light-color);
  cursor: pointer;
}

.feature-item:hover {
  background: var(--primary-color);
  transition: all 0.3s ease-in;
}

.feature-title {
  font-weight: 900;
  text-transform: uppercase;
  color: var(--secondary-color);
  transition: all 0.3s ease-in;
}

.feature-info {
  transition: all 0.3s ease-in;
}

.feature-item:hover .feature-info,
.feature-item:hover .feature-title {
  color: var(--light-color);
}

@media only screen and (min-width: 1400px) {
  #features {
    position: relative;
  }

  .feature-box {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (max-width: 1399px) {
  .feature-box {
    margin-top: 120px;
  }
}


/*----- catergory Section Style -------------------------*/
.category-paragraph {
  transition: all 0.3s ease-in;
}

.primary {
  background: var(--bs-primary-bg-subtle);
  transition: all 0.3s ease-in;
}

.svg-primary {
  color: var(--primary-color);
  transition: all 0.3s ease-in;
}

.primary:hover {
  background: var(--bs-primary);
}

.secondary {
  background: var(--bs-secondary-bg-subtle);
  transition: all 0.3s ease-in;
}

.svg-secondary {
  color: var(--secondary-color);
  transition: all 0.3s ease-in;
}

.secondary:hover {
  background: var(--bs-secondary);
}

.tertiary {
  background: var(--bs-tertiary-bg-subtle);
  transition: all 0.3s ease-in;
}

.svg-tertiary {
  color: var(--bs-tertiary);
  transition: all 0.3s ease-in;
}

.tertiary:hover {
  background: var(--bs-tertiary);
}

.gray {
  background: #e0e5eb;
  transition: all 0.3s ease-in;
}

.svg-gray {
  color: var(--bs-gray);
  transition: all 0.3s ease-in;
}

.gray:hover {
  background: var(--bs-gray);
}

.primary:hover .svg-primary,
.primary:hover .category-paragraph,
.secondary:hover .svg-secondary,
.secondary:hover .category-paragraph,
.tertiary:hover .svg-tertiary,
.tertiary:hover .category-paragraph,
.gray:hover .svg-gray,
.gray:hover .category-paragraph {
  color: var(--light-color);
}

/*----- courses Section Style -------------------------*/
h5.course-title {
  transition: all 0.3s ease-in;
}

h5.course-title:hover {
  color: var(--primary-color);
}


/*----- testimonial Section Style -------------------------*/
.swiper-pagination {
  position: unset;
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 10px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 10px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bs-primary);
  background: var(--bs-primary);
}


/*----- teacher Section Style -------------------------*/
.team-member ul.social-links {
  top: 0;
}

.team-member ul li {
  padding: 5px;
  transform: rotatey(-90deg) perspective(100px);
  transform-origin: left;
  cursor: pointer;
  transition: .5s ease-in-out;
  background-color: var(--primary-color);
}

.team-member ul li:first-of-type {
  transition-delay: .3s;
}

.team-member ul li:nth-of-type(2) {
  transition-delay: 0.6s;
}

.team-member ul li:nth-of-type(3) {
  transition-delay: 0.9s;
}

.team-member ul li:last-of-type {
  transition-delay: 1.3s;
}

.team-member:hover ul li {
  transform: rotatey(0deg);
}


/* Zoom Effect*/
.zoom-effect {
  position: relative;
  overflow: hidden;
}

.zoom-effect img {
  max-width: 100%;
  -webkit-transition: 0.6s ease-out;
  -moz-transition: 0.6s ease-out;
  transition: 0.6s ease-out;
}

.zoom-effect:hover img {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

.zoom-effect:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 2;
  opacity: 0;
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.zoom-effect:hover:before {
  opacity: 1;
  cursor: pointer;
}


/*----- register Section Style -------------------------*/
#register {
  background: var(--tertiary-color);
}


/*----- footer Section Style -------------------------*/
a.footer-link:hover {
  color: var(--primary-color);
}

svg.social-icon {
  color: var(--light-dark-color);
  transition: all 0.3s ease-in;
}

svg.social-icon:hover {
  color: var(--primary-color);
}




/*--------------------------------------------------------------
faqs page style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
  color: var(--body-text-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion {
  --bs-accordion-color: var(--light-text-color);
  --bs-accordion-bg: none;
  --bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%234cc082');

}

.accordion-button::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%234cc082');
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  box-shadow: none;
}



/*--------------------------------------------------------------
Checkout page style start
--------------------------------------------------------------*/
.form-check-input {
  border: 1px solid var(--primary-color);
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: none;
}


/*--------------------------------------------------------------
Styles page style start
--------------------------------------------------------------*/
.chocolat-wrapper {
  z-index: 9999;
}



/*--------------------------------------------------------------
Account page style start
--------------------------------------------------------------*/
.nav-tabs .nav-item.show .nav-link.account-tab,
.nav-tabs .nav-link.account-tab {
  color: var(--light-dark-color);
}

.nav-tabs .nav-item.show .nav-link.account-tab,
.nav-tabs .nav-link.account-tab.active {
  color: var(--primary-color);
}



/*--------------------------------------------------------------
Blog page style start
--------------------------------------------------------------*/

/* ------ Pagination ------*/
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: 0;
  --bs-pagination-hover-color: var(--light-color);
  --bs-pagination-hover-bg: var(--bs-primary);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--light-color);
  --bs-pagination-focus-bg: var(--bs-primary);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--light-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-primary-color);
  --bs-pagination-disabled-bg: var(--bs-primary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}



/*--------------------------------------------------------------
Single Product page style start
--------------------------------------------------------------*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--bs-body-color);
  background-color: var(--primary-color);
}

/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 660px;
}




/*--------------------------------------------------------------
  Shop page style
  --------------------------------------------------------------*/
.product-box {
  width: 25%;
}

@media screen and (max-width: 800px) {
  .product-box {
    width: 50%;
  }
}

.product-store .product-item {
  position: relative;
}

.product-item .cart-concern {
  background: var(--light-color);
  width: 80%;
  text-align: center;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 180px;
  z-index: 9;
  transition: 0.5s ease-out;
  padding: 20px 30px;
  opacity: 0;
}

.product-item:hover .cart-concern {
  bottom: 150px;
  opacity: 1;
}

.cart-concern .cart-button button {
  background: none;
  color: var(--dark-color);
  height: auto;
  padding: 0;
  margin: 0;
}

.cart-concern .cart-button button i.icon {
  font-size: 15px;
}

.product-item .wishlist-btn i.icon.icon-heart {
  font-size: 20px;
}

.product-item .item-price {
  font-size: 1.8em;
}




/*--------------------------------------------------------------
  course detail page style
  --------------------------------------------------------------*/
.nav-tabs .nav-item {
  transition: all 0.1s ease-in;
  border-radius: 0px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background-color: transparent;
  border-color: transparent;
  border-bottom: 4px solid var(--bs-primary);
  transition: all 0.1s ease-in;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: var(--bs-primary);
  isolation: isolate;
  border-color: transparent;
  border-bottom: 4px solid var(--bs-primary);
  transition: all 0.1s ease-in;
}

/*---- video section style start ----*/

/* color box style */
div#cboxOverlay {
  opacity: 0.8 !important;
}

.video .video-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

iconify-icon.video-icon {
  font-size: 30px;
  color: var(--bs-light);
  border-radius: 6.25rem;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.4s ease-in-out;
}

iconify-icon.video-icon:hover {
  font-size: 35px;
}

#testimonial h2{
	font-size: 44px;
  margin:0px 0px 30px 0px;
  font-weight: normal;
}

#myTab{
	background: #ec6c5a;
}


#myTab .nav-link{
	color: #fff;
	font-weight: 600;
	margin:14px 0px;
}

#myTab .nav-link:hover{
	color: #fff;
	background: #fb4228;
}


.tab-pane{
   padding-bottom:10px;
}


.tab-pane h6{
	font-size: 46px;
  margin:20px 0px;
  font-weight: 400;
}



.main-menu ul li ul li .dropdown-item:focus, .dropdown-item:hover {
  color: #FFF;
  background-color: #ec6c5a;
}


.sec_breadcrumb {
  background-color: #eff7ff;
}


.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  border-radius: .25rem;
}
.breadcrumb {
  margin-bottom: 0rem !important;
  margin-top: 0rem !important;
  background-color: #eff7ff;
  border-radius: 0rem !important;
}

.inner_section {
  margin: 5% 0%;
}

.inner_section h1 span {
  font-weight: 900;
  color: #ec6c5a;
  font-weight: lighter;
}

.inner_section h3 {
  font-size: 35px;
  color: #000;
  margin: 40px 0px;
}

.indus:hover {
  background: #fbeef3;
}
.indus {
  margin-bottom: 30px;
  padding: 25px;
  border: 1px #ccc solid;
  border-radius: 18px;
}

.indus h5 {
  font-size: 22px;
  text-transform: uppercase;
  font-weight: lighter;
  color: #a8174f;
}

.indus h4 {
  font-size: 30px;
  font-weight: bold;
  margin: 20px 0px 40px 20px;
  line-height: 30px;
}

.indus p {
  font-size: 16px;
  margin: 30px 0px;
  line-height: 30px;
  height: 150px;
}

.pro_c:hover {
  background: #fbeef3;
}
.pro_c {
  margin-bottom: 30px;
  padding: 25px;
  border: 1px #ccc solid;
  border-radius: 18px;
}

.pro_c h5 {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: lighter;
  color: #a8174f;
}

.pro_c h4 a:hover {
  color: #000;
  text-decoration: none;
}
.pro_c h4 a {
  font-size: 17px;
  font-weight: bold;
  color: #444;
  line-height: 30px;
  text-decoration: none;
}

.product_link_box {
  margin-top: 30px;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.btn-5 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  background: rgb(255,27,0);
background: linear-gradient(0deg, rgb(168, 23, 79) 0%, rgb(168, 23, 79) 100%);
}
.btn-5:hover {
  color: #f0094a;
  background: transparent;
   box-shadow:none;
}
.btn-5:before,
.btn-5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #f0094a;
  box-shadow:
   -1px -1px 5px 0px #fff,
   7px 7px 20px 0px #0003,
   4px 4px 5px 0px #0002;
  transition:400ms ease all;
}
.btn-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
  width:100%;
  transition:800ms ease all;
}

footer{
    border-top: 4px #ec6c5a solid;
}