@charset "UTF-8";
/*********************************************************************************************
** Table of Contents:                                                                       **
**********************************************************************************************

Project:    Nafie - HTML Portfolio Template
Version:    3.0.0
Created:    04/2021
Updated:    03/2022

1.  Color Codes
    ------------------------------
    1.  Primary Color
    2.  Secondary Color
    3.  Light Color
    4.  Dark Color
    5.  Success Color
    6.  Danger Color
    7.  Warning Color
    8.  Info Color
    ------------------------------

2.  Fonts Family
    ------------------------------
    1.  Logo Font
    2.  Headings Font
    3.  Body Font
    ------------------------------

3.  Animations
    ------------------------------
    1.  Zoom Effects
    2.  Fade Effects
    3.  Spinner Effects
    4.  Scale Effects
    5.  Rotate Effects
    6.  Slide Effects
    7.  Pulse Effects
    8.  LightSpeed Effects
    9.  Flash Effect
    10. Shine Effects
    11. Floating Effect
    ------------------------------

4.  Reset & Global elements
    ------------------------------

5.  UI Elements Styles
    ------------------------------
    1.  Forms
    2.  Toggle Switch Button
    3.  Custom Tooltip
    4.  Ultimate Tooltip
    ------------------------------

6.  Components Styles
    ------------------------------
    1.  Circle Cursor
    2.  Preloader
    3.  Header
    4.  Footer
    5.  Scroll to Top Button
    6.  Ajax Loading
    7.  Toast Notifications
    ------------------------------

7.  Pages Styles
    ------------------------------
    1.  Homepage
    2.  Single Portfolio
    3.  Not Found (404)
    ------------------------------

*********************************************************************************************/
/*-----------------------------------------------------------------------------------------*/
/* 1. Color Codes */
/*-----------------------------------------------------------------------------------------*/
:root {
  /* primary color */
  --primary-h: 24;
  --primary-s: 74%;
  --primary-l: 58%;
  --primary-color: var(--primary-h), var(--primary-s), var(--primary-l);
  /* secondary color */
  --secondary-h: 13;
  --secondary-s: 96%;
  --secondary-l: 47%;
  --secondary-color: var(--secondary-h), var(--secondary-s), var(--secondary-l);
  /* light color */
  --light-h: 0;
  --light-s: 0%;
  --light-l: 100%;
  --light-color: var(--light-h), var(--light-s), var(--light-l);
  /* dark color */
  --dark-h: 0;
  --dark-s: 0%;
  --dark-l: 12%;
  --dark-color: var(--dark-h), var(--dark-s), var(--dark-l);
  /* success color */
  --success-h: 135;
  --success-s: 60%;
  --success-l: 40%;
  --success-color: var(--success-h), var(--success-s), var(--success-l);
  /* danger color */
  --danger-h: 355;
  --danger-s: 70%;
  --danger-l: 55%;
  --danger-color: var(--danger-h), var(--danger-s), var(--danger-l);
  /* warning color */
  --warning-h: 45;
  --warning-s: 100%;
  --warning-l: 50%;
  --warning-color: var(--warning-h), var(--warning-s), var(--warning-l);
  /* info color */
  --info-h: 180;
  --info-s: 80%;
  --info-l: 40%;
  --info-color: var(--info-h), var(--info-s), var(--info-l);


      --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #e38443;
    --bs-secondary: #eb3505;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #fff;
    --bs-dark: #1f1f1f;
    --bs-primary-rgb: 227,132,67;
    --bs-secondary-rgb: 235,53,5;
    --bs-success-rgb: 40,167,69;
    --bs-info-rgb: 23,162,184;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 255,255,255;
    --bs-dark-rgb: 31,31,31;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg-rgb: 255,255,255;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
}


/*-----------------------------------------------------------------------------------------*/
/* 3. Animations */
/*-----------------------------------------------------------------------------------------*/
/* 1. Zoom Effects */
/*-----------------*/
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3, 0.3);
            transform: scale(0.3, 0.3);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3, 0.3);
            transform: scale(0.3, 0.3);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
/* 2. Fade Effects */
/*-----------------*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    margin-top: 20px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    margin-top: 20px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@-webkit-keyframes fadeInUpLeftTranslate {
  0% {
    opacity: 0;
    -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes fadeInUpLeftTranslate {
  0% {
    opacity: 0;
    -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes fadeInUpRightTranslate {
  0% {
    opacity: 0;
    -webkit-transform: translate(-20px, 20px);
            transform: translate(-20px, 20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes fadeInUpRightTranslate {
  0% {
    opacity: 0;
    -webkit-transform: translate(-20px, 20px);
            transform: translate(-20px, 20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes bigFadeInUp {
  0% {
    opacity: 0;
    margin-top: 40px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes bigFadeInUp {
  0% {
    opacity: 0;
    margin-top: 40px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    margin-top: -20px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    margin-top: -20px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    margin-right: -20px;
  }
  100% {
    opacity: 1;
    margin-right: 0;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    margin-right: -20px;
  }
  100% {
    opacity: 1;
    margin-right: 0;
  }
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    margin-left: -20px;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    margin-left: -20px;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}
/* 3. Spinner Effects */
/*--------------------*/
@-webkit-keyframes spinner-left {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spinner-left {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spinner-right {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes spinner-right {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
/* 4. scale Effects */
/*------------------*/
@-webkit-keyframes scaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}
@keyframes scaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}
/* 5. Rotate Effects */
/*-------------------*/
@-webkit-keyframes rotateInLeft {
  0% {
    -webkit-transform: rotate(-200deg);
            transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInLeft {
  0% {
    -webkit-transform: rotate(-200deg);
            transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@-webkit-keyframes rotateInRight {
  0% {
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInRight {
  0% {
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
/* 6. slide Effects */
/*------------------*/
@-webkit-keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes slideDown {
  0% {
    max-height: 0;
    overflow: hidden;
  }
  100% {
    max-height: 100vh;
    overflow: unset;
  }
}
@keyframes slideDown {
  0% {
    max-height: 0;
    overflow: hidden;
  }
  100% {
    max-height: 100vh;
    overflow: unset;
  }
}
/* 7. Pulse Effect */
/*-----------------*/
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 hsla(var(--primary-color), 50%);
            box-shadow: 0 0 0 0 hsla(var(--primary-color), 50%);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px transparent;
            box-shadow: 0 0 0 10px transparent;
  }
}
@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 hsla(var(--primary-color), 50%);
            box-shadow: 0 0 0 0 hsla(var(--primary-color), 50%);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px transparent;
            box-shadow: 0 0 0 10px transparent;
  }
}
/* 8. LightSpeed Effects */
/*-----------------------*/
@-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
            transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
            transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
@keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
            transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
            transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
@-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
@keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
/* 9. Flash Effect */
/*-----------------*/
@-webkit-keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
/* 10. Shine Effects */
/*-------------------*/
@-webkit-keyframes leftShine {
  100% {
    left: 125%;
  }
}
@keyframes leftShine {
  100% {
    left: 125%;
  }
}
@-webkit-keyframes rightShine {
  100% {
    right: 125%;
  }
}
@keyframes rightShine {
  100% {
    right: 125%;
  }
}
/* 11. Floating Effect */
/*---------------------*/
@-webkit-keyframes floating {
  0% {
    -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
            transform: rotate(0deg) translate(-10px) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
            transform: rotate(360deg) translate(-10px) rotate(-360deg);
  }
}
@keyframes floating {
  0% {
    -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
            transform: rotate(0deg) translate(-10px) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
            transform: rotate(360deg) translate(-10px) rotate(-360deg);
  }
}
/*------------------------------------------------------------------------------------------*/
/* 4. Defaults & Reset & Global elements */
/*------------------------------------------------------------------------------------------*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
html body {
  text-align: initial;
  overflow-x: hidden;
}

.hidden {
  display: none;
}

.section {
  outline: none;
}

/*------------------------------------------------------------------------------------------*/
/* 5. UI Elements Styles */
/*------------------------------------------------------------------------------------------*/

/* 7. Testimonials Section Styles */
/*--------------------------------*/

.testimonials-items li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.testimonials-section .section-content .testimonials-items {
  display: grid;
  grid-auto-rows: 220px;
}
@media (min-width: 992px) {
  .testimonials-section .section-content .testimonials-items {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 991.98px) {
  .testimonials-section .section-content .testimonials-items {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767.98px) {
  .testimonials-section .section-content .testimonials-items {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 575.98px) {
  .testimonials-section .section-content .testimonials-items {
    grid-template-columns: repeat(2, 1fr);
  }
}
.testimonials-section .section-content .testimonials-items li {
  position: relative;
  border-radius: 50%;
  animation: floating 20s linear infinite alternate-reverse both;
}
.testimonials-section .section-content .testimonials-items li .testimonials-item, 
.testimonials-section .section-content .testimonials-items li .testimonials-item a{
  cursor: help;
  /*visibility: hidden;*/
}
.testimonials-section .section-content .testimonials-items li .testimonials-item img {
  display: block;
  width: 130px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 11px 10px 38px hsla(0, 0%, 0%, 12%);
          box-shadow: 11px 10px 38px hsla(0, 0%, 0%, 12%);
  -webkit-filter: drop-shadow(2px 4px 6px hsla(0, 0%, 0%, 20%));
          filter: drop-shadow(2px 4px 6px hsla(0, 0%, 0%, 20%));
}
@media (max-width: 767.98px) {
  .testimonials-section .section-content .testimonials-items li:nth-of-type(1n + 7) {
    display: none;
  }
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(odd) {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(even) {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 2) {
  justify-self: flex-end;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 2) img {
  width: 200px;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 1) {
  justify-self: center;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 1) img {
  width: 120px;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 3) {
  justify-self: flex-end;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 3) img {
  width: 100px;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 4) {
  justify-self: flex-start;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 4) img {
  width: 150px;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 5) {
  justify-self: center;
}
.testimonials-section .section-content .testimonials-items li:nth-of-type(5n + 5) img {
  width: 180px;
}
.testimonials-section .section-content .testimonials-items li:focus {
  outline: none;
}
.enable-focus-style .testimonials-section .section-content .testimonials-items li:focus {
  -webkit-box-shadow: 0 0 0 3px hsla(var(var(--secondary-color)), 70%);
          box-shadow: 0 0 0 3px hsla(var(var(--secondary-color)), 70%);
}