/*---------------------------------------------------------------
        Template Name: Resume one page portfolio website
        Description: Onepage Resume or CV Website Template for Your Portfolio
        Author: Lucid Solutions
        Author URL: https://www.templatemonster.com/store/lucid_solutions/
        Version: 1.0.0
    -----------------------------------------------------------------
        CSS INDEX
        ==================
        1.  Basic Styles 
        2.  Home Styles
        3.  About Styles
        4.  Portfolio
----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* ==================
    1. Basic Styles 
================== */
[data-bs-theme="light"]{
    --PrimaryColor:           rgb(219, 147, 123);
    --SecondaryColor:         rgba(206, 233, 249, 1);
    --DangerColor:            rgb(92, 24, 12);
    --LightPurpleColor:       rgb(145, 89, 124);
    --SuccessColor:           rgb(15, 113, 115);
    --PurpleColor:            rgb(82, 72, 156);
    --LightColor:             rgba(90, 90, 90, 1);
    --LightGrayColor:         rgb(229, 229, 229);
    --BlackColor:             rgb(8, 8, 8);
    --WhiteColor:             rgb(251, 251, 251);
    --BgWhiteColor:           rgb(251, 251, 251);
    --BgWhiteColor2:          rgb(251, 251, 251);    
    --PrimaryColor-shade:     rgb(255, 240, 235);
    --SecondaryColor-shade:   rgb(238, 249, 255);
    --DangerColor-shade:      rgb(245 108 108);
    --LightPurpleColor-shade: rgb(253 219 240);
    --SuccessColor-shade:     rgb(180, 239, 240);
    --PurpleColor-shade:      rgb(224 220 253);
    --LightColor-shade:       rgb(147, 146, 146);
    --BlackColor-shade:       rgb(66, 66, 66);
    --WhiteColor-shade:       rgb(79, 79, 79);
    --PrimaryFont :           "Roboto", sans-serif;
}

[data-bs-theme="dark"]{
  --PrimaryColor:           rgb(255 239 233);
  --SecondaryColor:         rgba(206, 233, 249, 1);
  --DangerColor:            rgb(136, 45, 28);
  --LightPurpleColor:       rgb(255 234 247);
  --SuccessColor:           rgb(184 252 253);
  --PurpleColor:            rgb(233 230 255);
  --LightColor:             rgb(191, 191, 191);
  --LightGrayColor:         rgb(31 34 34);
  --BlackColor:             rgb(255, 255, 255);
  --WhiteColor:             rgb(251, 251, 251);
  --BgWhiteColor:           rgb(19, 22, 22);
  --PrimaryColor-shade:     rgb(102 62 49);
  --SecondaryColor-shade:   rgb(238, 249, 255);
  --DangerColor-shade:      rgb(123, 37, 37);
  --LightPurpleColor-shade: rgb(68 31 54);
  --SuccessColor-shade:     rgb(6 45 46);
  --PurpleColor-shade:      rgb(58 51 104);
  --LightColor-shade:       rgb(147, 146, 146);
  --BlackColor-shade:       rgb(27 30 30);
  --WhiteColor-shade:       rgb(79, 79, 79);
  --BgWhiteColor2:          rgb(27 30 30);
}

*{
    box-sizing: border-box;
    font-family: var(--PrimaryFont);
    word-break: break-word;
}
a{
  color: inherit;
  text-decoration: none;
}
a:hover{
  color: inherit;
  text-decoration: none;
}
body{
    overflow-x: hidden !important;
    background-color: var(--LightGrayColor);
}

/* background colors */

  .bg-primary{
    background-color: var(--PrimaryColor) !important;
  }
  .bg-secondary{
    background-color: var(--SecondaryColor) !important;
  }
  .bg-success{
  background-color: var(--SuccessColor) !important;
  }
  .bg-danger{
  background-color: var(--DangerColor) !important;
  }
  .bg-light{
  background-color: var(--LightColor) !important;
  }
  .bg-purple{
  background-color: var(--PurpleColor) !important;
  }
  .bg-lightpurple{
  background-color: var(--LightPurpleColor) !important;
  }
  .bg-dark{
  background-color: var(--BlackColor) !important;
  }
  .bg-white{
  background-color: var(--BgWhiteColor) !important;
  }
  .bg-white2{
    background-color: var(--BgWhiteColor2) !important;
  }

/* background colors */

/* background colors shade */

.bg-primary-shade{
  background-color: var(--PrimaryColor-shade) !important;
}
.bg-secondary-shade{
  background-color: var(--SecondaryColor-shade) !important;
}
.bg-success-shade{
background-color: var(--SuccessColor-shade) !important;
}
.bg-danger-shade{
background-color: var(--DangerColor-shade) !important;
}
.bg-light-shade{
background-color: var(--LightColor-shade) !important;
}
.bg-purple-shade{
background-color: var(--PurpleColor-shade) !important;
}
.bg-lightpurple-shade{
background-color: var(--LightPurpleColor-shade) !important;
}
.bg-dark-shade{
background-color: var(--BlackColor-shade) !important;
}
.bg-white-shade{
background-color: var(--WhiteColor-shade) !important;
}

/* background colors opacity */

/* buttons */

  .primary-btn{
    background-color: var(--PrimaryColor) !important;
    border-color: var(--PrimaryColor) !important ;
    color: var(--WhiteColor);
    min-width: 100px;
    padding: 10px;
  }
  .primary-btn:hover{
    background-color: rgb(248, 203, 189) !important;
    border-color: rgb(248, 203, 189) !important;
    color: var(--WhiteColor) !important;
  }
  .primary-outline-btn{
    background-color: unset !important;
    border-color: var(--PrimaryColor) !important ;
    color: var(--PrimaryColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .primary-outline-btn:hover{
    background-color: var(--PrimaryColor) !important;
    border-color: var(--PrimaryColor) !important;
    color: var(--WhiteColor) !important;
  }
  .secondary-btn{
    background-color: var(--SecondaryColor) !important;
    border-color: var(--SecondaryColor) !important;
    color: var(--BlackColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .secondary-btn:hover{
    background-color: rgb(225, 240, 249) !important;
    border-color: rgb(225, 240, 249) !important;
    color: var(--BlackColor) !important;
  }
  .secondary-outline-btn{
    background-color: unset !important;
    border-color: var(--SecondaryColor) !important;
    color: var(--SecondaryColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .secondary-outline-btn:hover{
    background-color: var(--SecondaryColor) !important;
    border-color: var(--SecondaryColor) !important;
    color: var(--BlackColor) !important;
  }
  .light-btn{
    background-color: var(--LightColor) !important;
    border-color: var(--LightColor) !important;
    color: var(--WhiteColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .light-btn:hover{
    background-color: rgb(134, 134, 134) !important;
    border-color: rgb(134, 134, 134) !important;
    color: var(--WhiteColor) !important;
  }
  .light-outline-btn{
    background-color: unset !important;
    border-color: var(--LightColor) !important;
    color: var(--LightColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .light-outline-btn:hover{
    background-color: var(--LightColor) !important;
    border-color: var(--LightColor) !important;
    color: var(--WhiteColor) !important;
  }
  .danger-btn{
    background-color: var(--DangerColor) !important;
    border-color: var(--DangerColor) !important;
    color: var(--WhiteColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .danger-btn:hover{
    background-color: rgb(216, 94, 73) !important;
    border-color: rgb(216, 94, 73) !important;
    color: var(--WhiteColor) !important;
  }
  .danger-outline-btn{
    background-color: unset !important;
    border-color: var(--DangerColor) !important;
    color: var(--DangerColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .danger-outline-btn:hover{
    background-color: var(--DangerColor) !important;
    border-color: var(--DangerColor) !important;
    color: var(--WhiteColor) !important;
  }
  .lightpurple-btn{
    background-color: var(--LightPurpleColor) !important;
    border-color: var(--LightPurpleColor) !important;
    color: var(--WhiteColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .lightpurple-btn:hover{
    background-color: rgb(166, 112, 145) !important;
    border-color: rgb(166, 112, 145) !important;
    color: var(--WhiteColor) !important;
  }
  .lightpurple-outline-btn{
    background-color: unset !important;
    border-color: var(--LightPurpleColor) !important;
    color: var(--LightPurpleColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .lightpurple-outline-btn:hover{
    background-color: var(--LightPurpleColor) !important;
    border-color: var(--LightPurpleColor) !important;
    color: var(--WhiteColor) !important;
  }
  .success-btn{
    background-color: var(--SuccessColor) !important;
    border-color: var(--SuccessColor) !important;
    color: var(--WhiteColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .success-btn:hover{
    background-color: rgb(29, 141, 143) !important;
    border-color: rgb(29, 141, 143) !important;
    color: var(--WhiteColor) !important;
  }
  .success-outline-btn{
    background-color: unset !important;
    border-color: var(--SuccessColor) !important;
    color: var(--SuccessColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .success-outline-btn:hover{
    background-color: var(--SuccessColor) !important;
    border-color: var(--SuccessColor) !important;
    color: var(--WhiteColor) !important;
  }
  .purple-btn{
    background-color: var(--PurpleColor) !important;
    border-color: var(--PurpleColor) !important;
    color: var(--WhiteColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .purple-btn:hover{
    background-color: rgb(102, 91, 180) !important;
    border-color: rgb(102, 91, 180) !important;
    color: var(--WhiteColor) !important;
  }
  .purple-outline-btn{
    background-color: unset !important;
    border-color: var(--PurpleColor) !important;
    color: var(--PurpleColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .purple-outline-btn:hover{
    background-color: var(--PurpleColor) !important;
    border-color: var(--PurpleColor) !important;
    color: var(--WhiteColor) !important;
  }
  .dark-btn{
    background-color: var(--BlackColor) !important;
    border-color: var(--BlackColor) !important;
    color: var(--WhiteColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .dark-btn:hover{
    background-color: rgb(36, 36, 36) !important;
    border-color: rgb(36, 36, 36) !important;
    color: var(--WhiteColor) !important;
  }
  .dark-outline-btn{
    background-color: unset !important;
    border-color: var(--BlackColor) !important;
    color: var(--BlackColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .dark-outline-btn:hover{
    background-color: var(--BlackColor) !important;
    border-color: var(--BlackColor) !important;
    color: var(--WhiteColor) !important;
  }
  .white-btn{
    background-color: var(--WhiteColor) !important;
    border-color: var(--WhiteColor) !important;
    color: var(--BlackColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .white-btn:hover{
    background-color: rgb(229, 229, 229) !important;
    border-color: rgb(229, 229, 229) !important;
    color: var(--BlackColor) !important;
  }
  .white-outline-btn{
    background-color: unset !important;
    border-color: var(--WhiteColor) !important;
    color: var(--BlackColor) !important;
    min-width: 100px;
    padding: 10px;
  }
  .white-outline-btn:hover{
    background-color: var(--WhiteColor) !important;
    border-color: var(--WhiteColor) !important;
    color: var(--BlackColor) !important;
  }

/* buttons */

/* text-color */

  .text-primary{
    color: var(--PrimaryColor) !important;
  }
  .text-secondary{
    color: var(--SecondaryColor) !important;
  }
  .text-dark{
    color: var(--BlackColor) !important;
  }
  .text-light{
    color: var(--LightColor) !important;
  }
  .text-success{
    color: var(--SuccessColor) !important;
  }
  .text-danger{
    color: var(--DangerColor) !important;
  }
  .text-white{
    color: var(--WhiteColor) !important;
  }
  .text-purple{
    color: var(--PurpleColor) !important;
  }
  .text-lightpurple{
    color: var(--LightPurpleColor) !important;
  }
  /* othercss */

  .fs-7{
    font-size: 14px;
  }
  .fs-8{
    font-size: 12px;
  }
  .fs-9{
    font-size: 10px;
  }
  .shade-box{
    width: 40px !important;
  }
  .nav-pills .nav-link.active{
    background-color: var(--SuccessColor-shade) !important;
    color: var(--BlackColor) !important;
  }
  .nav-link, .nav-link:hover{
    color: var(--SuccessColor);
  }
  @media(min-width:992px){
    .offcanvas-backdrop{
      display: none;
    }
  }
  .fit{
    width: fit-content;
  }
  .form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--SuccessColor);
    outline: 0;
    box-shadow: unset;
}
.slimScrollBar{
  background: var(--BlackColor) !important;
}
/* =========================
    Home Styles
   ========================= */
  .content_tab{
    min-height: 625px;
  }
  .banner_main{
    background:linear-gradient(0deg, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.5)), url(../../assets/images/xvid.mp4)no-repeat;
    background-position: center center;
    background-size: cover;
    height: 200px;
  }
.banner_contact{
    background:linear-gradient(0deg, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.5)), url(../../assets/images/xvid.mp4)no-repeat;
    background-position: center center;
    background-size: cover;
    height: 200px;
  }
  .headline{
    -webkit-text-stroke:1px var(--WhiteColor);
    color: transparent !important;
  }
  #project-list{
    min-height:250px !important;
  }

/* timeline */
.timeline {
	width: 100%;
  max-width: 540px;
	/* max-width: 36em; */
}
.timeline__arrow {
	background-color: transparent;
	border-radius: 0.25em;
  border: 0px !important;
	cursor: pointer;
	flex-shrink: 0;
	margin-inline-end: 0.25em;
	outline: transparent;
	width: 2em;
	height: 2em;

}
.timeline__arrow:focus-visible,
.timeline__arrow:hover {
	background-color: var(--SuccessColor-shade);
}
.timeline__arrow-icon {
	display: block;
	pointer-events: none;
	transform: rotate(-90deg);
	transition: transform 0.3s cubic-bezier(0.65,0,0.35,1);
	width: 100%;
	height: auto;
  color: var(--SuccessColor);
}
.timeline__date {
	font-size: 0.833em;
	line-height: 2.4;
}
.timeline__dot {
	background-color: var(--SuccessColor-shade);
	border-radius: 50%;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-shrink: 0;
	margin: 5px 0 0 5px;
	margin-inline-end: 1em;
	position: relative;
	width: 20px;
	height: 20px;
}
.timeline__dot::after{
  content:'.';
  background-color: var(--SuccessColor);
  width: 10px;
  height: 10px;
  color: white;
  border-radius: 50%;
}
.timeline__item {
	position: relative;
	/* padding-bottom: 2.25em; */
}
.timeline__item:not(:last-child):before {
	background-color: rgb(237 237 237);
	content: "";
	display: block;
	position: absolute;
	top: 1em;
	left: 50px;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}
[dir="rtl"] .timeline__arrow-icon {
	transform: rotate(90deg);
}
[dir="rtl"] .timeline__item:not(:last-child):before {
	right: 2.625em;
	left: auto;
	transform: translateX(50%);
}
.timeline__item-header {
	display: flex;
}
.timeline__item-body {
	border-radius: 0.375em;
	overflow: hidden;
	margin-top: 0.5em;
	margin-inline-start: 4em;
	height: 0;
}
.timeline__item-body-content {
	background-color: var(--PrimaryColor-shade);
	opacity: 0;
	padding: 0.5em 0.75em;
	visibility: hidden;
	transition:
		opacity 0.3s cubic-bezier(0.65,0,0.35,1),
		visibility 0.3s steps(1,end);
}
.timeline__meta {
	width: 100%;
}
/* Expanded state */
.timeline__item-body--expanded {
	height: auto;
}
.timeline__item-body--expanded .timeline__item-body-content {
	opacity: 1;
	visibility: visible;
	transition-delay: 0.3s, 0s;
}
.timeline__arrow[aria-expanded="true"] .timeline__arrow-icon {
	transform: rotate(0);
}

/* progress bar css */

.ce_ixelgen_progress_bar {
  max-width: 800px;
  margin: 0 auto;
}
.ce_ixelgen_progress_bar .item_bar {
  position: relative;
  height: 18px;
  width: 100%;
  background-color: var(--SuccessColor-shade);
  border-radius: 10px;
}
.ce_ixelgen_progress_bar .item_bar .progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 18px;
  margin: 0;
  background-color: var(--SuccessColor);
  border-radius: 10px 0 0 10px;
  transition: width 100ms ease;
}

/* ======================
    About Styles
   ====================== */

.timeline-1 {
  border-left: 1px solid rgb(237 237 237);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  margin: 0 auto;
  position: relative;
  padding: 0 0 0 20px;
  list-style: none;
  text-align: left;
}
.timeline-1 .event {
  margin-bottom: 25px;
  position: relative;
}
.timeline-1 .event:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}

.timeline-1 .event:before,
.timeline-1 .event:after {
  position: absolute;
  display: block;
  top: 0;
}

@media (max-width: 767px) {
  .timeline-1 .event:before {
    left: 0px;
    text-align: left;
  }
}
.timeline-1 .event:nth-child(odd):after {
  box-shadow: 0 0 0 5px var(--SuccessColor-shade);
  left: -26px;
  background: var(--SuccessColor);
  border-radius: 50%;
  height: 10px;
  width: 10px;
  content: "";
  top: 6px;
}
.timeline-1 .event:nth-child(even):after {
  box-shadow: 0 0 0 5px var(--SuccessColor-shade);
  left: -26px;
  background: var(--SuccessColor);
  border-radius: 50%;
  height: 10px;
  width: 10px;
  content: "";
  top: 6px;
}
.animate-box{
  max-width: 350px;
  margin:auto;
}
/* .animate-box:hover .rotate{
  transform: rotate(360deg);
  transition: 0.5s ease-in-out;
} */
.animate-box:hover {
  transform: scale(1.05);
  box-shadow: 2px 2px 2px 2px lightgray;
  transition: 0.2s ease-in-out;
}
.testimonials .splide__pagination{
  bottom:-15px;
}
#splide .splide__slide{
  text-align: center;
}

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

   .portfolio-card {
     color: white;
     border-radius: 15px;
     overflow: hidden;
     position: relative;
     max-height: 250px;
   }
   .portfolio-card img{
    width: 100%;
   }
   .portfolio-card-main {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     gap: 1rem;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
   .portfolio-content{
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(0deg, rgba(115, 102, 109, 0.607), rgba(58, 50, 55, 0.51));
    opacity: 0;
    transition: 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: end;

   }
   .portfolio-card:hover .portfolio-content{
    opacity: 1 !important;
    left: 0;
   }