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

  CUSTOM PROPERTIES ( VARIABLES )             

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

:root {

  --white-color:                #191919;

  --primary-color:              #ff1d3b;

  --section-bg-color:           #522546;

  --dark-color:                 #dadbdb;

  --grey-color:                 #dfdfdf;

  --p-color:                    #c3c3c4;

  --bgg-color:                  #000000dd;

  --brojevi-color:              #f0f0f0;



  --body-font-family:           'Inter', sans-serif;



  --h5-font-size:               24px;

  --p-font-size:                20px;

  --copyright-text-font-size:   16px;

  --product-link-font-size:     14px;

  --custom-link-font-size:      12px;



  --font-weight-thin:           100;

  --font-weight-light:          300;

  --font-weight-normal:         400;

  --font-weight-bold:           700;

  --font-weight-black:          900;

}



body,

html {

  height: 100%;

}



html {

  scroll-behavior: smooth;

}



@media screen and (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

}



body {

    font-family: var(--body-font-family);   

    position: relative;

}



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

  TYPOGRAPHY               

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



h2,

h3,

h4,

h5,

h6 {

  color: var(--brojevi-color);

  line-height: inherit;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: var(--font-weight-bold);

}



h1,

h2 {

  font-weight: var(--font-weight-black);

}



h1 {

  font-size: 70px;

  line-height: normal;

}



h2 {

  font-size: 42px;

}



h3 {

  font-size: 36px;

}



h4 {

  font-size: 32px;

}



h5 {

  font-size: 24px;

}



h6 {

  font-size: 20px;

}



p {

  color: var(--p-color);

  font-size: var(--p-font-size);

  font-weight: var(--font-weight-light);

}



a, 

button {

  touch-action: manipulation;

  transition: all 0.3s;

}



a {

  color: var(--p-color);

  text-decoration: none;

}



a:hover {

  color: var(--primary-color);

}



.text-primary {

  color: var(--primary-color) !important;

}



::selection {

  background: var(--primary-color);

  color: var(--white-color);

}



.player-table thead {

  color: #ff1d3b;

}



thead th {

position: sticky;

top: 0;

background: #1a1a1a;

}



.player-table td {

  text-align: left;

}



.tabelab {

  border-radius: 50px;

}



.table-container {

  width: 100%;

  padding-bottom: 50px;

}



.player-table {

  width: 100%;

  border-collapse: collapse;

  color: #fff;

}



.score {

 text-align: left;

}

.player-table th, .player-table td {

  padding: 8px 12px;

  border-bottom: 1px solid #333;

}



.scroll-body {

  max-height: 300px; /* Adjust height as needed */

  overflow-y: auto;

}



/* Webkit Scrollbar Styling */

.scroll-body::-webkit-scrollbar {

  width: 8px;

}



.scroll-body::-webkit-scrollbar-track {

  background: #1a1a1a;

  border-radius: 10px;

}



.scroll-body::-webkit-scrollbar-thumb {

  background: #888;

  border-radius: 10px;

}



.scroll-body::-webkit-scrollbar-thumb:hover {

  background: #555;

}



@keyframes pulse {

  0%, 100% {

    transform: scale(1);

    box-shadow: 0 0 0 0 rgb(241, 42, 68);;

  }

  50% {

    transform: scale(1.05);

    box-shadow: 0 0 0 3px rgb(223, 49, 72);

  }

}



.pulse {

  animation: pulse 3s infinite;

}



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

  CUSTOM LINK               

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

.custom-link {

  color: var(--p-color);

  font-size: var(--custom-link-font-size);

  font-weight: var(--font-weight-bold);

  text-transform: uppercase;

  position: relative;

}



.custom-link i {

  position: absolute;

  opacity: 0;

  bottom: 0;

  left: 100%;

  transition: all 0.3s;

  line-height: normal;

}



.custom-link:hover i {

  opacity: 1;

  left: 101%;

}



.lead {

  font-size: 1.5rem;

  font-weight: var(--font-weight-thin);

}



b,

strong {

  font-weight: var(--font-weight-bold);

}



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

  PRE LOADER               

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

.preloader {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 99999;

  display: flex;

  flex-flow: row nowrap;

  justify-content: center;

  align-items: center;

  background: none repeat scroll 0 0 var(--white-color);

}



.spinner {

  border: 1px solid transparent;

  border-radius: 5px;

  position: relative;

}



.spinner::before {

  content: '';

  box-sizing: border-box;

  position: absolute;

  top: 50%;

  left: 50%;

  width: 45px;

  height: 45px;

  margin-top: -10px;

  margin-left: -23px;

  border-radius: 50%;

  border: 1px solid #959595;

  border-top-color: var(--white-color);

  animation: spinner .9s linear infinite;

}



@keyframes spinner {

  to {transform: rotate(360deg);}

}



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

  CUSTOM BUTTON & ICON              

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

.custom-btn {

  background: var(--primary-color);

  border-radius: 50px;

  color: var(--black-color);

  font-size: var(--copyright-text-font-size);

  text-transform: uppercase;

  padding: 16.50px 20px;

}

.report-btn {

  background: var(--primary-color);

  border-radius: 50px;

  color: #000;

  font-size: var(--copyright-text-font-size);

  text-transform: uppercase;

  text-align: center;

  padding: 5.50px 10px;

}

.social-btn {

  background: transparent;

  border: 1px solid var(--grey-color);

  color: var(--dark-color);

  text-transform: none;

}



.social-btn:hover {

  border-color: transparent;

}



.cart-form-select {

  border-radius: 0;

  padding-top: 15px;

  padding-bottom: 15px;

}



.cart-btn {

  border-radius: 0;

  width: 100%;

  font-size: var(--product-link-font-size);

}



.custom-btn:hover,

.slick-slideshow .custom-btn:hover {

  background: var(--primary-color);

  color: var(--white-color);

}



.custom-icon {

  color: var(--p-color);

  font-size: 24px;

}



.custom-icon {

  display: inline-block;

  vertical-align: middle;

}



.bi-bag.custom-icon {

  font-size: 17px;

}



.featured-icon {

  color: var(--grey-color);

  font-size: 52px;

}



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

  DIV SEPARATOR               

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

.div-separator {

  position: relative;

}



.div-separator::before {

  content: "";

  height: 1px;

  background: var(--grey-color);

  display: block;

  width: 100%;

}



.div-separator span {

  position: absolute;

  top: 50%;

  margin-left: -22.5px;

  left: 50%;

  text-align: center;

  background: var(--white-color);

  margin-top: -11px;

  color: var(--dark-color);

  font-weight: var(--font-weight-bold);

  font-size: 14px;

  width: 35px;

  text-transform: uppercase;

}



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

  FULL IMAGE               

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

.full-image-img {

  display: block;

  position: absolute;

  z-index: -1;

  right: 0;

  width: 100%;

  bottom: -120px;

  min-width: 650px;

}



@media (min-width: 1600px) {

  .full-image-img {

    bottom: -200px;

  }

}





.sing-up {

  text-align: center;

      background-color: #ff1d3b;

      padding: 10px 10px 10px 10px;

      border-radius: 12px;

      width: 100px;



}



.sing-up a {

  text-align: center;

  color:rgb(255, 255, 255);

  font-weight: bold;

  font-size: 17px;

}



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

  NAVIGATION               

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

.navbar {  

  background: transparent;

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  padding: 20px 0;

  z-index: 2;

  will-change: transform;

  transition: transform 300ms linear;

}



.navbar span, h2 span, h4 span {

	color: var(--primary-color);

}



.navbar.headroom--not-top {

  padding: 20px 0;

}



.headroom--pinned {

  transform: translate(0, 0);

}



.headroom--unpinned {

  transform: translate(0, -150%);

}



.navbar-brand {

  color: var(--dark-color);

  font-size: 24px;

  font-weight: var(--font-weight-light);

  margin: 0;

  padding: 0;

  left: 20px;

}



.navbar-expand-lg .navbar-nav .nav-link {

  display: inline-block;

  padding: 0;

  margin-right: 1.2rem;

  margin-left: 1.5rem;

}



.nav-link {

  color: var(--p-color);

  font-size: 15px;

  font-weight: bolder;

  position: relative;

}



.navbar .nav-link::after {

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  height: 2px;

  background: transparent;

  content: '';

  opacity: 0;

  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

  -moz-transition: opacity 0.3s, -moz-transform 0.3s;

  transition: opacity 0.3s, transform 0.3s;

  -webkit-transform: translateY(10px);

  -moz-transform: translateY(10px);

  transform: translateY(10px);

}



.navbar .nav-link.active::after, 

.navbar .nav-link:hover::after {

  opacity: 1;

  -webkit-transform: translateY(0px);

  -moz-transform: translateY(0px);

  transform: translateY(0px);

}



.navbar .nav-link.active {

  color: #c3c3c4;

}



.navbar .nav-link:hover {

  color: #9b9b9b;

}



.nav-link:focus, 

.nav-link:hover {

  color: var(--p-color);

}



.navbar-toggler {

  border: 0;

  padding: 0;

  cursor: pointer;

  margin: 0;

  width: 30px;

  height: 35px;

  outline: none;

}



.navbar-toggler:focus {

  outline: none;

  box-shadow: none;

}



.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {

  background: transparent;

}



.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {

  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;

  transition: top 300ms 50ms ease, transform 300ms 350ms ease;

  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;

  top: 0;

}



.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {

  transform: rotate(45deg);

}



.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {

  transform: rotate(-45deg);

}



.navbar-toggler .navbar-toggler-icon {

  background: var(--dark-color);

  transition: background 10ms 300ms ease;

  display: block;

  width: 30px;

  height: 2px;

  position: relative;

}



.navbar-toggler .navbar-toggler-icon::before,

.navbar-toggler .navbar-toggler-icon::after {

  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;

  transition: top 300ms 350ms ease, transform 300ms 50ms ease;

  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;

  position: absolute;

  right: 0;

  left: 0;

  background: var(--dark-color);

  width: 30px;

  height: 2px;

  content: '';

}



.navbar-toggler .navbar-toggler-icon:before {

  top: -8px;

}



.navbar-toggler .navbar-toggler-icon:after {

  top: 8px;

}



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

  SITE HEADER              

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

.site-header {

  background-color: var(--section-bg-color);

  position: relative;

  overflow: hidden;

  margin-top: 86px;

}



.site-header.section-padding {

  padding-top: 7rem;

  padding-bottom: 7rem;

}



.site-header.section-padding-img {

  padding-top: 10rem;

  padding-bottom: 10rem;

}



.header-image {

  position: absolute;

  top: 0;

  right: 0;

  width: 50%;

  height: 100%;

  object-fit: cover;

}



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

  SLICK SLIDESHOW               

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

@media (min-width: 992px) {

  .slick-slideshow {

    height: 100vh;

  }

}



.slick-slideshow {

  margin-top: 0px;

  background-size: cover;

}



.slick-title {

  color: var(--primary-color);

}



.slick-custom {

  position: relative;

}



.slick-custom img {

  width: 140%;

  object-fit: cover;

}



.slick-bottom {

  background: linear-gradient(to top, var(--bgg-color), transparent 80%);

  position: absolute;

  z-index: 2;

  bottom: 0;

  right: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.mirror {

  background-color: hsla(0, 0%, 13%, 0.842);

  border-radius: 50px;

  padding: 50px;

}

.logo-text {

      display: flex;

      justify-content: left;

      align-items: center; /* Align items to the bottom */

}



.logo-info {

  max-width: 50%;

  border-radius: 50px;



}

.slick-bottom .container {

  position: absolute;

  top: 40%;

  left: 50%;

  transform: translate(-50%, -40%);

}



.media-box {

      display: flex;

      align-items: center;

      background-color: hsla(0, 0%, 9%, 0.842);

      padding: 35px 30px 35px 30px;

      border-radius: 16px;

      color: white;

      width: 520px;

      /* height: 200px; */

      box-shadow: 0 2px 8px rgba(0,0,0,0.3);

}



.players-box{

      margin-top: -50px;

      margin-left: -60px;

      display: flex;

      align-items: center;

      background-color: hsla(0, 0%, 9%, 0.842);

      padding: 15px 10px 15px 10px;

      border-radius: 16px;

      color: white;

      width: 200px;

      /* height: 200px; */

      box-shadow: 0 2px 8px rgba(0,0,0,0.3);



}



.players-box:hover {

    cursor: pointer;

    background-color: hsla(0, 0%, 18%, 0.842);

}



.players-text {

      display: flex;

      flex-direction: column;

      overflow: hidden;

}

.players-text .number {

      font-size: 20px;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

}



.players-box button {

      width: 50px;

      height: 50px;

      border-radius: 12px;

      object-fit: cover;

      margin-right: 12px;

}



.players-box img {

      width: 35px;

      height: 35px;

      border-radius: 12px;

      object-fit: cover;

      margin-right: 12px;

}



.media-box img {

      width: 150px;

      height: 150px;

      border-radius: 12px;

      object-fit: cover;

      margin-right: 12px;

}



.media-text {

      display: flex;

      flex-direction: column;

      overflow: hidden;

}



.media-text .title {

      font-weight: bold;

      font-size: 35px;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

}



.media-text .subtitle {

      font-size: 17px;

      color: #ccc;

}



.slick-overlay {

  background: linear-gradient(to top, #000, transparent 120%);

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}



.slick-slideshow .custom-btn {

  font-weight: var(--font-weight-bold);

  display: inline-block;

  padding-right: 32px;

  padding-left: 32px;

}



@media (min-width: 576px) {

  .slick-slideshow .slick-dots {

    max-width: 540px;

  }

}



@media (min-width: 768px) {

  .slick-slideshow .slick-dots {

    max-width: 720px;

  }

}



@media (min-width: 992px) {

  .slick-slideshow .slick-dots {

    max-width: 960px;

  }

}



@media (min-width: 1200px) {

  .slick-slideshow .slick-dots {

    max-width: 1140px;

  }

}



@media (min-width: 1400px) {

  .slick-slideshow .slick-dots {

    max-width: 1320px;

  }

}



.slick-slideshow .slick-dots {

  position: absolute;

  z-index: 2;

  top: 50%;

  left: 0;

  right: 0;

  transform: translate(0, -50%);

  margin: 0 auto;

  padding: 0;

}



.slick-slideshow .slick-dots li {

  background: transparent;

  border: 5px solid rgba(255, 255, 255, 0.35);

  border-radius: 100%;

  display: block;

  width: 30px;

  height: 30px;

  margin: 10px;

  padding: 5px;

  margin-left: auto;

  cursor: pointer;

}



.slick-slideshow .slick-dots button {

  background: transparent;

  border: none;

  color: transparent;

  display: block;

  width: 100%;

  height: 0;

  margin: 0;

  padding: 0;

  outline: none;

  height: 0;

}



.slick-slideshow .slick-dots li:hover,

.slick-slideshow .slick-dots .slick-active {

  background: var(--primary-color)

}



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

  CUSTOM CIRCLE IMAGES               

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



.custom-circle-image {

  border-radius: 100px;

  width: 55px;

  height: 55px;

}



.custom-circle-image.team-image {

  width: 85px;

  height: 85px;

}



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

  TESTIMONIAL               

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

.slick-testimonial .slick-list,

.slick-testimonial .slick-track {

  height: 100%;

}



.slick-testimonial {

  margin: auto;

}



.slick-testimonial-caption {

  quotes: '❝' '❞';

  position: relative;

  padding: 5rem 7rem;

}



.slick-testimonial-caption::before {

  content: open-quote;

  display: inline-block;

  color: var(--primary-color);

  font-family: auto;

  font-size: 100px;

  height: 0;

  position: absolute;

  top: 0;

  left: 0;

}



.slick-testimonial .slick-dots {

  text-align: center;

}



.slick-testimonial .slick-dots li {

  background: var(--grey-color);

  display: inline-block;

  vertical-align: top;

  width: 16%;

  height: 1px;

}



.slick-testimonial .slick-dots button {

  background: transparent;

  border: none;

  color: transparent;

  display: block;

  width: 100%;

  height: 0;

  margin: 0;

  padding: 0;

}



.slick-testimonial .slick-dots li:hover,

.slick-testimonial .slick-dots .slick-active {

  background: #24242f;

}


.banovani {

  background-image: url('images/slideshow/BG25.jpg')
}

.searchplayer {
  background: hsla(0, 4%, 5%, 0.911);
  color:#ff1d3b;
  margin-bottom:10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  padding:5px;
  width:300px;
}


.table-head__cell {

    color: #ff1d3b;
    padding: 0px 10px;
    background: #161616;
    border-bottom: 1px solid #333;
    font-size: 18px;
    height: 70px;

}

.table-body__cell {
    padding: 12px;
    
}

.table-row {
  font-family: var(--font-normal);
  border-radius: .25rem;
  background: hsla(0, 2%, 8%, 0.911);
  border-bottom: 1px solid #333;
  height: 50px;
}

/*#bans {
    border-collapse: separate; 
    border-spacing: 0px 10px;
} */

.table-body__row .table-body__cell:last-child {
    padding: 10px;
    border-radius: 0px 0px 0px 0px;

}

.table-body__row .table-body__cell:first-child {
    padding: 10px;
    border-radius: 0px 0px 0px 0px;
}



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

  SECTION               

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

section {

  content-visibility: auto;

  contain-intrinsic-size: 700px;

  background: #191919;

}



.section-padding {

  padding-top: 7rem;

  padding-bottom: 7rem;

}



.featured {

  background: var(--section-bg-color);

}



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

  ABOUT               

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

.about .nav-pills .nav-item {

  width: 100%;

}



.about .nav-pills .nav-link {

  color: var(--grey-color);

  font-size: 18px;

  font-weight: var(--font-weight-bold);

  border-left: 1px solid var(--grey-color);

  border-radius: 0;

  padding-right: 0;

}



.about .nav-pills .nav-link:hover,

.about .nav-pills .nav-link.active, 

.about .nav-pills .show>.nav-link {

  background: transparent;

  border-left-color: var(--primary-color);

  color: var(--primary-color);

}



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

  FAQ ACCORDION               

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

.accordion-item {

  background-color: transparent;

  border-top: 0;

  border-right: 0;

  border-left: 0;

}



.accordion-button {

  background-color: transparent;

  box-shadow: none;

}



.accordion-button:not(.collapsed) {

  background: transparent;

  box-shadow: none;

}



button:focus:not(:focus-visible) {

  border-color: transparent;

  box-shadow: none;

}



.accordion-body {

  border-top: 1px solid rgba(0,0,0,.125);

}



.accordion-button {

  font-size: 1.5rem;

  font-weight: var(--font-weight-normal);

  padding-top: 1.5rem;

  padding-right: 0;

  padding-bottom: 1.5rem;

  padding-left: 0;

}



.accordion-body {

  padding: 2rem 0;

}



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

  TEAM MEMBERS               

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

.team {

  background: var(--white-color);

}



.team-thumb {

  position: relative;

  border-radius: .25rem;

  padding: 35px 30px;

  background-color: hsla(0, 0%, 9%, 0.842);

  color: white;

  box-shadow: 0 2px 8px rgba(0,0,0,0.3);

}



.team-info {

  width: 100%;

}

.team-info h5 span {

  color: var(--primary-color);

}



.custom-modal-btn {

  background: var(--white-color);

  color: #dadbdb;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto 32px;

  width: 42px;

  height: 42px;

}



.modal-header {

  padding-top: 2rem;

  padding-bottom: 2rem;

  background-color: #161616;

  border: 0;

}



.modal-header .btn-close {

  position: absolute;

  top: 0;

  right: 0;

  font-size: 15px;

  margin: 10px;

  color: #dadbdb;

}

.online-p {

  font-size: 25px;

  color: #00FF46;

}



.online-p span {

  font-size: 20px;

  color: var(--dark-color);

}

.modal-body {

  padding: 2rem;

  background-color: var(--white-color);

}



.moday-body .th {



 color: #ff1d3b;

}



#cart-modal .modal-header .btn-close {

  z-index: 2;

  margin: 22px;

}



#cart-modal .modal-header {

  border-bottom: 0;

  padding: 0;

}



#cart-modal .modal-footer {

  padding: 2rem 4rem;

}



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

  SKILL - PROGRESS BAR               

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

.skill-thumb strong {

  display: inline-block;

  margin-bottom: 6px;

}



.skill-thumb span {

  color: var(--dark-color);

  font-size: 24px;

  font-weight: var(--font-weight-bold);

}



.skill-thumb .progress {

  background: var(--white-color);

  box-shadow: none;

  border-radius: 100px;

  height: 1px;

  margin-bottom: 16px;

}



.skill-thumb .progress .progress-bar-primary {

  background: var(--grey-color);

}



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

  PRODUCT               

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

.front-product {

  background: var(--section-bg-color);

}



.product-thumb {

  background: hsla(0, 0%, 9%, 0.842);

  position: relative;

  transition: all 0.5s ease-out;

}



.product-image {

  transition: all 0.5s ease-out;

}



.product-thumb:hover .product-image {

  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);

}



.product-top {

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  margin: 20px;

}



.product-info {

  padding: 30px 20px;

}



.product-description,

.product-cart-thumb {

  padding: 0 20px;

}



.product-icon {

  color: var(--white-color);

}



.product-title-link {

  color: var(--dark-color);

}



.product-additional-link {

  display: inline-block;

  vertical-align: top;

  font-size: var(--product-link-font-size);

  margin-top: 32px;

  margin-right: 12px;

}



.product-alert {

  background: var(--white-color);

  color: var(--p-color);

  font-size: var(--custom-link-font-size);

  font-weight: var(--font-weight-bold);

  padding: 3px 10px;

}



.product-p {

  font-size: var(--product-link-font-size);

}



.view-all {

  text-transform: uppercase;

  color: var(--p-color);

  font-size: 13px;

  font-weight: var(--font-weight-bold);

  border-bottom: 2px solid var(--grey-color);

  padding-bottom: 6px;

}



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

  CONTACT              

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

.contact-info {

  padding: 40px;

}



.contact-form .form-control {

  border-color: var(--grey-color);

  font-weight: var(--font-weight-normal);

}



.form-floating>label {

  color: var(--grey-color);

  font-weight: var(--font-weight-normal);

}



.contact-form button[type='submit'] {

  background: var(--dark-color);

  border: none;

  border-radius: 100px;

  color: var(--white-color);

  font-weight: var(--font-weight-bold);

  text-transform: uppercase;

  padding: 16px;

}



.contact-form button[type='submit']:hover {

  background: var(--primary-color);

}



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

  SITE FOOTER               

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

.site-footer {

  background-color: rgba(13, 12, 12, 0.973);
  padding-top: 1rem;
  padding-bottom: 1rem;

}



.footer-menu {

  margin: 0;

  padding: 0;

}



.footer-menu-item {

  display: block;

  width: 50%;

}



.footer-menu-link {

  color: #6c757d;

  font-weight: var(--font-weight-light);

  display: inline-block;

  vertical-align: top;

  margin-top: 4px;

  margin-bottom: 4px;

}



.site-footer .social-icon-link {

  margin-top: 4px;

}



.site-footer .social-icon-link:hover,

.footer-menu-link:hover {

  color: var(--white-color);

}



.copyright-text {

  font-size: var(--copyright-text-font-size);

}



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

  SOCIAL ICON               

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

.social-icon {

  margin: 0;

  padding: 0;

}



.social-icon li {

  list-style: none;

  display: inline-block;

  vertical-align: top;

}



.social-icon-link {

  color: #787d81;

  font-size: 1rem;

  display: inline-block;

  vertical-align: top;

  margin-bottom: 4px;

  margin-right: 15px;

}



.social-icon-link:hover {

  color: var(--primary-color);

}



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

  RESPONSIVE STYLES               

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

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

  h1 {

    font-size: 62px;

  }

}



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

  h1 {

    font-size: 42px;

    margin-bottom: 0;

  }



  h2 {

    font-size: 36px;

  }



  h3 {

    font-size: 32px;

  }



  h4 {

    font-size: 28px;

  }



  h5 {

    font-size: 24px;

  }



  h6 {

    font-size: 20px;

  }



  .lead {

    font-size: 16px;

  }



  .navbar-expand-lg .navbar-nav .nav-link {

    margin-top: 1rem;

  }



  .site-header {

    background-position: bottom;

  }



  #cart-modal .modal-header .btn-close {

    margin: 22px 14px;

  }



  .custom-btn {

    font-size: 14px;

    padding: 13.5px 20px;

  }



  .slick-slideshow .custom-btn {

    padding-right: 27px;

    padding-left: 27px;

  }



  .social-login,

  .div-separator {

    width: 75% !important;

  }



  #cart-modal .modal-footer .row {

    width: 100% !important;

  }



  .site-header.section-padding,

  .section-padding {

    padding-top: 4rem;

    padding-bottom: 4rem;

  }



  .site-header-image.section-padding {

    padding-bottom: 0;

  }



  .header-info {

    padding-top: 50px;

    padding-bottom: 100px;

  }



  .header-image {

    position: relative;

    top: auto;

    bottom: 0;

    left: 0;

    width: auto;

    height: auto;

  }



  .slick-testimonial-caption {

    padding: 6rem 3rem 4rem 3rem;

  }



  .slick-slideshow .slick-dots li {

    width: 25px;

    height: 25px;

  }



  .modal-header {

    padding-top: 6rem;

    padding-bottom: 2rem;

  }



  .modal-body {

    padding: 2rem;

  }



  #cart-modal .modal-footer {

    padding-right: 0;

    padding-left: 0;

  }



  #cart-modal .modal-body {

    padding: 4rem 2rem 2rem 2rem;

  }



  .full-image-img {

    bottom: 0;

  }

}