/**



* Author: https://arprovat.com/

* License: https://arprovat.com/license/

*/



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

# General

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

.widget-visible iframe{

    bottom:100px !important;

    

}

::-webkit-scrollbar {

    width: 8px; /* Scrollbar er width */

}



::-webkit-scrollbar-track {

    background: linear-gradient(to right top,

        rgba(241, 245, 249, 0.8),

        rgba(244, 247, 250, 0.8),

        rgba(247, 248, 251, 0.8),

        rgba(250, 250, 252, 0.8),

        rgba(252, 252, 253, 0.8),

        rgba(248, 246, 254, 0.9),

        rgba(246, 240, 253, 0.3),

        rgba(245, 234, 252, 0.3),

        rgba(244, 217, 244, 0.2),

        rgba(247, 199, 232, 0.2),

        rgba(251, 180, 214, 0.1),

        rgba(255, 161, 191, 0.1)

    );

}

::-webkit-scrollbar-track :hover{

    background: linear-gradient(to right top,

        rgba(255, 161, 191, 0.1),

        rgba(251, 180, 214, 0.1),

        rgba(247, 199, 232, 0.2),

        rgba(244, 217, 244, 0.2),

        rgba(245, 234, 252, 0.3),

        rgba(246, 240, 253, 0.3),

        rgba(248, 246, 254, 0.9),

        rgba(252, 252, 253, 0.8),

        rgba(250, 250, 252, 0.8),

        rgba(247, 248, 251, 0.8),

        rgba(244, 247, 250, 0.8),

        rgba(241, 245, 249, 0.8)

    );

}



::-webkit-scrollbar-thumb {

    background: #566573; /* Scrollbar er color */

    border-radius: 10px; /* Scrollbar er corner ke round korte */

}



::-webkit-scrollbar-thumb:hover {

    background: #eef7ff;

    border:solid rgb(187 201 235) 1px ;

}

 

/* Fonts */

:root {

  --default-font: "Roboto",  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";

  --heading-font: "Raleway",  sans-serif;

  --nav-font: "Poppins",  sans-serif;

}



/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */

:root { 

  --background-color: #ffffff; /* Background color for the entire website, including individual sections */

  --default-color: #272829; /* Default color used for the majority of the text content across the entire website */

  --heading-color: #45505b; /* Color for headings, subheadings and title throughout the website */

  --accent-color: #566573; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */

  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */

  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */

}



/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */

:root {

  --nav-color: #45505b;  /* The default color of the main navmenu links */

  --nav-hover-color: #0563bb; /* Applied to main navmenu links when they are hovered over or active */

  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */

  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */

  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */

  --nav-dropdown-hover-color: #0563bb; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */

}



/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */



.light-background {

  --background-color: #f9f9f9;

  --surface-color: #ffffff;

}



.dark-background {

  --background-color: #060606;

  --default-color: #ffffff;

  --heading-color: #ffffff;

  --surface-color: #252525;

  --contrast-color: #ffffff;

}



/* Smooth scroll */

:root {

  scroll-behavior: smooth;

}



.btn_more {

    left:50% !important;

    display: inline-block;

    padding: 5px 10px; 

    background: rgb(255,255,255);

    background: linear-gradient(90deg, rgba(255,255,255,0.718) 0%, rgba(241,245,249,0.762) 100%);

    color: #45505b;

    border-radius: 50px;

    text-decoration: none; 

    border: 2px solid rgba(241, 245, 255, 0.99);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease-in-out; 

    text-align: center;

    margin: 0 auto;

}



.btn_more:hover {

    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Hover korle deep shadow hobe */

    transform: translateY(-2px); /* Button ektu upor uthbe hover korle */

}



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

# General Styling & Shared Classes

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

body {

    overflow-x: hidden;
  color: var(--default-color);

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

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

}

#details, #reverse{

    padding-left: 0 !important;

    padding-right: 0 !important;

}

a {

  color: #566573;

  text-decoration: none;

  transition: 0.3s;

}



a:hover {

  color: color-mix(in srgb, var(--accent-color), transparent 25%);

  text-decoration: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--heading-color);

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

}

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

  # Back to top button

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

  .back-to-top {

    position: fixed;

    visibility: hidden;

    opacity: 0;

    right: 15px;

    bottom: 100px;

    z-index: 900;

    background: #566573;

    width: 40px;

    height: 40px;

    border-radius: 50px;

    transition: all 0.4s;

  }

  .back-to-top i {

    font-size: 28px;

    color: #fff;

    line-height: 0;

  }

  .back-to-top:hover {

    background: #eef7ff;

  }

  .back-to-top:hover i {

    color: #566573;

  }

  .back-to-top.active {

    visibility: visible;

    opacity: 1;

  } 

  



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

# Global Header

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

#hearde {

    width: 100%;

    padding: auto;

    position: fixed;

    top: 0;

    bottom: 0;

    z-index: 997;

    transition: all 0.5s;

    /*padding: 15px;*/

    overflow-y: auto;

}

.color-filter {

    filter: brightness(0) saturate(100%) invert(61%) sepia(4%) saturate(204%) hue-rotate(175deg) brightness(95%) contrast(87%);

  }



@media (max-width: 1199px) {

  .header {

    /*background-color: var(--background-color);*/

    /*border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);*/

    /*width: 300px;*/

    /*left: -100%;*/

  }

}



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

  .header~main {

    /*margin-left: 160px;*/

  }



  .header~main .hero {

    /*margin-left: -160px;*/

    /*width: 100vw;*/

  }

}



.header.header-show {

  left: 0;

}



.header .header-toggle {

  color: var(--contrast-color);

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

  font-size: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  position: fixed;

  top: 15px;

  right: 15px;

  z-index: 9999;

  transition: background-color 0.3s;

}



.header .header-toggle:hover {

  color: var(--contrast-color);

  background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);

}





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

# Disable aos animation delay on mobile devices

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

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

  [data-aos-delay] {

    transition-delay: 0 !important;

  }

}



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

# Global Page Titles & Breadcrumbs

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

.page-title{

    position: fixed;

    width: 100%;

    padding: auto;

    z-index: 1000;

	

      background: rgb(255,255,255);

      background: linear-gradient(270deg, rgba(255,255,255,0.4) 0%, rgba(241,245,249,0.6) 100%);

      backdrop-filter: blur(13px);

      -webkit-backdrop-filter: blur(13px);

      border: none;

border-bottom: 2px solid rgba(241, 245, 255, 0.99);

}

.page-title .container img {

    width: 100%;

    max-width: 200px;

    height: auto;

}

/*.page-title {*/

/*  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);*/

/*  color: var(--default-color);*/

/*  background-color: var(--background-color);*/

/*  padding: 20px 0;*/

/*  position: relative;*/

/*}*/



.page-title h1 {

  font-size: 28px;

  font-weight: 700;

  margin: 0;

}



.page-title .breadcrumbs ol {

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  padding: 0 0 10px 0;

  margin: 0;

  font-size: 14px;

  font-weight: 400;

}



.page-title .breadcrumbs ol li+li {

  /*padding-right: 2px;*/

}



.page-title .breadcrumbs ol li+li::before {

  content: "";

  display: inline-block;

  /*padding-right: 10px;*/

  color: color-mix(in srgb, var(--default-color), transparent 70%);

}



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

# Global Sections

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

section,

.section {

  color: var(--default-color);

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

  padding: 90px 0 30px 0;

  overflow: clip;

}



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

# Global Section Titles

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

.section-title {

  text-align: center;

  padding-bottom: 60px;

  position: relative;

}



.section-title h2 {

  font-size: 32px;

  font-weight: 700;

  margin-bottom: 20px;

  padding-bottom: 20px;

  position: relative;

}



.section-title h2:before {

  content: "";

  position: absolute;

  display: block;

  width: 160px;

  height: 1px;

  background: color-mix(in srgb, var(--default-color), transparent 60%);

  left: 0;

  right: 0;

  bottom: 1px;

  margin: auto;

}



.section-title h2::after {

  content: "";

  position: absolute;

  display: block;

  width: 60px;

  height: 3px;

  background: var(--accent-color);

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}



.section-title p {

  margin-bottom: 0;

}





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

# Portfolio Details Section

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

.portfolio {

    /*content: '';*/

    /*position: absolute;*/

    /*top: 0;*/

    /*left: 0;*/

    /*width: 100%;*/

    /*height: 100%;*/

    background: rgb(255, 255, 255);

    background-color: #ffffff;

    background-image: linear-gradient(to right top, 

        rgba(241, 245, 249, 0.8),   /* হালকা ধূসর */

        rgba(244, 247, 250, 0.8),   /* আরেকটি হালকা ধূসর */

        rgba(247, 248, 251, 0.8),   /* হালকা সাদা */

        rgba(250, 250, 252, 0.8),   /* খুব হালকা সাদা */

        rgba(252, 252, 253, 0.8),   /* প্রায় সাদা */

        rgba(248, 246, 254, 0.7),   /* হালকা নীল */

        rgba(246, 240, 253, 0.4),   /* হালকা গোলাপি */

        rgba(245, 234, 252, 0.4),   /* আরো হালকা গোলাপি */

        rgba(244, 217, 244, 0.3),   /* লাল-মিশ্রিত হালকা গোলাপি */

        rgba(247, 199, 232, 0.3),   /* গোলাপি */

        rgba(251, 180, 214, 0.3),   /* আরও গাঢ় গোলাপি */

        rgba(255, 161, 191, 0.3)    /* হালকা লাল */

    );

 }

 

.portfolio #portfolio-flters {

    padding: 0;

    margin: 0 auto 25px auto;

    list-style: none;

    text-align: center;

    background: #fff;

    border-radius: 50px;

    padding: 2px 15px;

    

    background: rgb(255,255,255);

    background: linear-gradient(90deg, rgba(255,255,255,0.7184292521994136) 0%, rgba(241,245,249,0.7624175219941349) 100%);

    

     /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/

  }

  .portfolio #portfolio-flters li {

    cursor: pointer;

    display: inline-block;

    padding: 10px 15px;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    color: #272829;

    margin-bottom: 5px;

    transition: all 0.3s ease-in-out;

  }

  .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {

    color: #566573;

  }

  .portfolio #portfolio-flters li:last-child {

    margin-right: 0;

  }

  .portfolio-item {

    margin-bottom: 30px; 

}



  .portfolio .portfolio-wrap {

      width: 100%;

    height: auto; 

    object-fit: cover; 

    aspect-ratio: 16 / 9;

    transition: 0.3s;

    border-radius: 15px ;

    background:rgba(241, 245, 255, 0.99);

    box-shadow: 0 4px 8px 0 rgba(255,255,255,0.7), 0 6px 20px 0 rgba(241,245,249,0.9);

    position: relative;

    overflow: hidden;

    z-index: 1;

    /*background: rgba(69, 80, 91, 0.2);*/

    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/

    

  }

  .portfolio .portfolio-wrap::before {

    content: "";

    background: rgba(241, 245, 255, 0.2);

    

    border-radius: 15px ;

    position: absolute;

    left: 30px;

    right: 30px;

    top: 30px;

    bottom: 30px;

    transition: all ease-in-out 0.3s;

    z-index: 2;

    opacity: 0;

  }

  .portfolio .portfolio-wrap .portfolio-info {

      

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    text-align: center;

    z-index: 3;

    transition: all ease-in-out 0.3s;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

.portfolio-wrap :hover img{



    transform: scale(1.1);

  }

  .portfolio .portfolio-wrap .portfolio-info::before {

    display: block;

    content: "";

    width: 48px;

    height: 48px;

    position: absolute;

    top: 35px;

    left: 35px;

    /*border-top: 3px solid #d7dce1;*/

    /*border-left: 3px solid #d7dce1;*/

    transition: all 0.5s ease 0s;

    z-index: 994;

  }

  .portfolio .portfolio-wrap .portfolio-info::after {

    display: block;

    content: "";

    width: 48px;

    height: 48px;

    position: absolute;

    bottom: 35px;

    right: 35px;

    /*border-bottom: 3px solid #d7dce1;*/

    /*border-right: 3px solid #d7dce1;*/

    transition: all 0.5s ease 0s;

    z-index: 994;

  }

  .portfolio .portfolio-wrap .portfolio-info h4 {

    font-size: 20px;

    color: #fff;

    font-weight: 600;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);

  }

  .portfolio .portfolio-wrap .portfolio-info p {

    color: #1f1616;

    font-size: 14px;

    /*text-transform: uppercase;*/

    padding: 0;

    margin: 0;

  }

  .portfolio .portfolio-wrap .portfolio-links {

    text-align: center;

    z-index: 4;

  }

  .portfolio .portfolio-wrap .portfolio-links a {

    color: #45505b;

    margin: 0 2px;

    font-size: 28px;

    display: inline-block;

    transition: 0.3s;

  }

  .portfolio .portfolio-wrap .portfolio-links a:hover {

    color: #148af9;

  }

  .portfolio .portfolio-wrap:hover::before {

      

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 1;

  }

  .portfolio .portfolio-wrap:hover .portfolio-info {

      backdrop-filter: blur(13px);

	 -webkit-backdrop-filter: blur(13px);

    opacity: 1;

  }

  

  

  .portfolio .portfolio-content {

  position: relative;

  overflow: hidden;

}



.portfolio .portfolio-content img {

  transition: 0.3s;

}



.portfolio .portfolio-content .portfolio-info {

  opacity: 0;

  position: absolute;

  inset: 0;

  z-index: 3;

  transition: all ease-in-out 0.3s;

  background: rgba(0, 0, 0, 0.6);

  padding: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.portfolio .portfolio-content .portfolio-info h4 {

  font-size: 18px;

  mask-border: 0;

  font-weight: 400;

  color: #ffffff;

  display: inline-block;

}



.portfolio .portfolio-content .portfolio-info p {

  text-align: center;

  display: inline-block;

  font-size: 14px;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.8);

}



.portfolio .portfolio-content .portfolio-info .preview-link,

.portfolio .portfolio-content .portfolio-info .details-link {

  font-size: 26px;

  color: #fff;

  transition: 0.3s;

  line-height: 1.2;

}



.portfolio .portfolio-content .portfolio-info .preview-link:hover,

.portfolio .portfolio-content .portfolio-info .details-link:hover {

  color: var(--accent-color);

}



.portfolio .portfolio-content .portfolio-info .details-link {

  left: 50%;

  font-size: 34px;

  line-height: 0;

}



.portfolio .portfolio-content:hover .portfolio-info {

  opacity: 1;

}



.portfolio .portfolio-content:hover img {

  transform: scale(1.1);

}


.portfolio-details .portfolio-details-slider img {

  width: 100%;

  height:auto;

  border-radius: 15px;

  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.055);

  display: flex;

}

.swiper-slide video {

    width: 100%;

    height: auto;

    object-fit: cover;

}



.portfolio-details .swiper-wrapper {

  height: auto;

}



.portfolio-details .swiper-button-prev,

.portfolio-details .swiper-button-next {

  width: 48px;

  height: 48px;

}



.portfolio-details .swiper-button-prev:after,

.portfolio-details .swiper-button-next:after {

  color: rgba(255, 255, 255, 0.8);

  background-color: rgba(0, 0, 0, 0.15);

  font-size: 24px;

  border-radius: 50%;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

}



.portfolio-details .swiper-button-prev:hover:after,

.portfolio-details .swiper-button-next:hover:after {

  background-color: rgba(0, 0, 0, 0.3);

}



@media (max-width: 575px) {



  .portfolio-details .swiper-button-prev,

  .portfolio-details .swiper-button-next {

    display: none;

  }

}



.portfolio-details .swiper-pagination {

  margin-top: 20px;

  position: relative;

}



.portfolio-details .swiper-pagination .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  background-color: color-mix(in srgb, var(--default-color), transparent 85%);

  opacity: 1;

}



.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {

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

}





.portfolio-details .portfolio-info h3 {

  font-size: 22px;

  font-weight: 700;

  margin-bottom: 20px;

  padding-bottom: 20px;

  position: relative;

}



.portfolio-details .portfolio-info h3:after {

  content: "";

  position: absolute;

  display: block;

  width: 50px;

  height: 3px;

    background: #566573;

  left: 0;

  bottom: 0;

}



.portfolio-details .portfolio-info{

  margin-bottom: 15px;

  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.055);

  padding: 10px 5px 0px 15px;

  border-radius: 14px;

  background: rgb(255,255,255);

  background: linear-gradient(310deg, rgba(255, 255, 255, 0.12) 20%, rgba(241, 245, 249, 0.5) 80%);

      



}

.portfolio-details .portfolio-info ul {

  list-style: none;

  padding: 0;

  font-size: 15px;



}



.portfolio-details .portfolio-info ul li {

  /*display: flex;*/

  /*flex-direction: column;*/

  padding-bottom: 15px;

}



.portfolio-details .portfolio-info ul strong {

  text-transform: uppercase;

  font-weight: 400;

  color: color-mix(in srgb, var(--default-color), transparent 50%);

  font-size: 14px;

}



.portfolio-details .portfolio-info ul a {

  color: #45505b;

}

.portfolio-details .portfolio-info ul i {

  color: #45505b;

}



.portfolio-details .portfolio-info .btn-visit {

  padding: 8px 40px;

  background: var(--accent-color);

  color: var(--contrast-color);

  border-radius: 50px;

  transition: 0.3s;

}



.portfolio-details .portfolio-info .btn-visit:hover {

    color: #566573;

    border:.5px solid #566573;

  background-color: color-mix(in srgb, #eef7ff, transparent 10%);

}



.portfolio-details .challeng, .feture, .problem{

    padding-top:5px;

    border-radius: 15px;

    background: rgb(255,255,255);

    background: linear-gradient(130deg, rgba(255, 255, 255, 0.5) 10%, rgba(241, 245, 249, 0.2) 90%);

}



.portfolio-details h4 i{

    font-size: 20px;

    color: #566573;

    float: left;

    width: 44px;

    height: 44px;

    background: #eef7ff;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50px;

    transition: all 0.3s ease-in-out

}



.portfolio-details h4 {

    padding-top: 10px;

    font-size: 22px;

    font-weight: 600;

    margin-bottom: 5px;

    color: #45505b;

}



.portfolio-details h4 i:hover{

    background: #566573;

    color: #fff;

}



.portfolio-details .portfolio-description h2 {

  font-size: 26px;

  font-weight: 700;

  margin-bottom: 20px;

}



.challeng .portfolio-description p{

    padding-left:50px;

}



.portfolio-details .portfolio-description p {

    padding:5px;

}



.portfolio-details .portfolio-description .testimonial-item {

  padding: 30px 30px 0 30px;

  position: relative;

  border-radius: 15px;

  background: rgb(255,255,255);

  background: linear-gradient(330deg, rgba(255, 255, 255, 0.2) 10%, rgba(241, 245, 249, 0.6) 90%);

  margin-bottom: 50px;

}



.portfolio-details .portfolio-description .testimonial-item .testimonial-img {

  width: 90px;

  border-radius: 50px;

  border: 6px solid var(--background-color);

  float: left;

  margin: 0 10px 0 0;

}



.portfolio-details .portfolio-description .testimonial-item h3 {

  font-size: 18px;

  font-weight: bold;

  margin: 15px 0 5px 0;

  padding-top: 20px;

}



.portfolio-details .portfolio-description .testimonial-item h4 {

  font-size: 14px;

  color: #6c757d;

  margin: 0;

}



.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {

  color: color-mix(in srgb, var(--accent-color), transparent 50%);

  font-size: 26px;

  line-height: 0;

}



.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {

  display: inline-block;

  left: -5px;

  position: relative;

}



.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {

  display: inline-block;

  right: -5px;

  position: relative;

  top: 10px;

  transform: scale(-1, -1);

}



.portfolio-details .portfolio-description .testimonial-item p {

  font-style: italic;

  margin: 0 0 15px 0 0 0;

  padding: 0;

}

.portfolio-details .features .portfolio-description ul {

    list-style-type: none;

    padding-left: 50px;

}

.portfolio-details .features .portfolio-description  li {

        list-style-type: disclosure-closed;

    /*display: flex;*/

    /*align-items: center;*/

}

.portfolio-details .problem .portfolio-description ul {

    list-style-type: none;

    padding-left: 50px;

}

.portfolio-details .problem .portfolio-description  li {

        list-style-type: disclosure-closed;

    /*display: flex;*/

    /*align-items: center;*/

}

 

.portfolio-details .features .portfolio-description li i {

    display:none;

    font-size:20px;

    margin-right: 5px;

}



.portfolio-card{

    padding:0 !important;

}



.description-text {

    max-height: 150px;

    overflow: hidden; 

    text-overflow: ellipsis; 

    display: -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

}

.des_text {

    max-height: 150px;

    overflow: hidden; 

    text-overflow: ellipsis; 

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

}

.card-img-top{

    border-top-left-radius: 15px !important;

    border-top-right-radius: 15px !important;

    /*object-fit: cover;*/

}

.card-img-top:hover{

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

    transform: scale(1.1) !important;

    transition: 0.3s !important;

}



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

  # Services

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

  .services{

      

  }

  .services .icon-box {

      

      border-radius: 25px;

    text-align: center;

    padding: 70px 20px 80px 20px;

    transition: all ease-in-out 0.3s;

    /*background: #fff;*/

    background: rgb(255,255,255);

    background: linear-gradient(200deg, rgba(255, 255, 255, 0.2) 10%, rgba(241, 245, 249, 0.6) 90%);

    box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.05);

  }

  .services .icon-box .icon {

    margin: 0 auto;

    width: 100px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: ease-in-out 0.3s;

    position: relative;

  }

  .services .icon-box .icon i {

    font-size: 36px;

    transition: 0.5s;

    position: relative;

  }

  .services .icon-box .icon svg {

    position: absolute;

    top: 0;

    left: 0;

  }

  .services .icon-box .icon svg path {

    transition: 0.5s;

    fill: #f5f5f5;

  }

  .services .icon-box h4 {

    font-weight: 600;

    margin: 10px 0 15px 0;

    font-size: 22px;

  }

  .services .icon-box h4 a {

    color: #45505b;

    transition: ease-in-out 0.3s;

  }

  .services .icon-box p {

    line-height: 24px;

    font-size: 14px;

    margin-bottom: 0;

  }

  .services .icon-box:hover {

    border-color: #fff;

    box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);

  }

  .services .iconbox-blue i {

    color: #47aeff;

  }

  .services .iconbox-blue:hover .icon i {

    color: #fff;

  }

  .services .iconbox-blue:hover .icon path {

    fill: #47aeff;

  }

  .services .iconbox-orange i {

    color: #ffa76e;

  }

  .services .iconbox-orange:hover .icon i {

    color: #fff;

  }

  .services .iconbox-orange:hover .icon path {

    fill: #ffa76e;

  }

  .services .iconbox-pink i {

    color: #e80368;

  }

  .services .iconbox-pink:hover .icon i {

    color: #fff;

  }

  .services .iconbox-pink:hover .icon path {

    fill: #e80368;

  }

  .services .iconbox-yellow i {

    color: #ffbb2c;

  }

  .services .iconbox-yellow:hover .icon i {

    color: #fff;

  }

  .services .iconbox-yellow:hover .icon path {

    fill: #ffbb2c;

  }

  .services .iconbox-red i {

    color: #ff5828;

  }

  .services .iconbox-red:hover .icon i {

    color: #fff;

  }

  .services .iconbox-red:hover .icon path {

    fill: #ff5828;

  }

  .services .iconbox-teal i {

    color: #11dbcf;

  }

  .services .iconbox-teal:hover .icon i {

    color: #fff;

  }

  .services .iconbox-teal:hover .icon path {

    fill: #11dbcf;

  }

  

  

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

# Service Details Section

--------------------------------------------------------------*/
.service-details .service-details-slider img{
        width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.055);
    display: flex


}
.service-details .service-box {
    padding: 20px;
    background: rgb(255, 255, 255);
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.7184292521994136) 0%, rgba(241, 245, 249, 0.7624175219941349) 100%);
    background-blend-mode: overlay;
    padding: 20px;
    border-radius: 8px;
    box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.1);

}

/* Arrow Icon Styling */
.arrow {
    transition: transform 0.3s ease;
    font-size: 16px;
}
/* Responsive Styling */
@media (min-width: 992px) {
    .services-list {
        display: block; /* Display block for desktop view */
    }
}

.service-details .service-box+.service-box {

  margin-top: 30px;

}



.service-details .service-box h4 {

  font-size: 20px;

  font-weight: 700;

  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);

  padding-bottom: 15px;

  margin-bottom: 15px;

}



.service-details .services-list a {
  background: rgb(255, 255, 255);
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.7184292521994136) 0%, rgba(241, 245, 249, 0.7624175219941349) 100%);
  background-blend-mode: overlay;
  color: #566573;
  display: flex;

  align-items: center;

  padding: 12px 15px;
  
  border-radius: 23px;

  margin-top: 15px;

  transition: 0.3s;

}



.service-details .services-list a:first-child {

  margin-top: 0;

}



.service-details .services-list a i {

  font-size: 16px;

  margin-right: 8px;

  color: var(--contrast-color);

}



.service-details .services-list a.active {
  background: linear-gradient(270deg, rgba(241, 245, 249, 0.762) 0%, rgba(255, 255, 255, 0.718) 100%);
  background-blend-mode: overlay;
  color: #2C3E50;
  transform: scale(0.98);
  transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}



.service-details .services-list a.active i {
    color: #2C3E50;
}



.service-details .services-list a:hover {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, rgba(241, 245, 249, 0.85) 100%);
  background-blend-mode: overlay;
  color: #34495E; /* Slightly darker color on hover */
  transform: translateY(-2px); /* Lift effect on hover */
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.service-details .services-list a:hover i {
    color: #2C3E50;
}


.service-details .download-catalog a {

  color: var(--default-color);

  display: flex;

  align-items: center;

  padding: 10px 0;

  transition: 0.3s;

  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.service-details .download-catalog a:first-child {

  border-top: 0;

  padding-top: 0;

}



.service-details .download-catalog a:last-child {

  padding-bottom: 0;

}



.service-details .download-catalog a i {

  font-size: 24px;

  margin-right: 8px;

  color: var(--accent-color);

}



.service-details .download-catalog a:hover {

  color: var(--accent-color);

}



.service-details .help-box {

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

  color: var(--contrast-color);

  margin-top: 30px;

  padding: 30px 15px;

}



.service-details .help-box .help-icon {

  font-size: 48px;

}



.service-details .help-box h4,

.service-details .help-box a {

  color: var(--contrast-color);

}







.service-detail {
    /*padding-top: 27px;*/
    margin-top: -30px;
    z-index: 99;
    border-radius: 12px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.7184292521994136) 0%, rgba(241, 245, 249, 0.7624175219941349) 100%);
}
.service-details h3 {

  font-size: 26px;

  font-weight: 700;

}



.service-details p {

  font-size: 15px;

}



.service-details ul {

  list-style: none;

  padding: 0;

  font-size: 15px;

}



.service-details ul li {

  padding: 5px 0;

  display: flex;

  align-items: center;

}



.service-details ul i {

  font-size: 20px;

  margin-right: 8px;

  color: var(--accent-color);

}



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

  # Footer

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

  #footer {

      z-index:999;

      background-image:url("https://arprovat.com/CDN/img/png/contact.png");

      background-repeat: no-repeat;

      background-size: cover;

      /*background-color: rgba(255, 255, 255, 0.486);*/

      background: rgb(255,255,255);

      background: linear-gradient(90deg, rgba(255,255,255,0.7184292521994136) 0%, rgba(241,245,249,0.7624175219941349) 100%);

      background-blend-mode: overlay;



    

    color: #45505b;

    font-size: 14px;

    text-align: center;

    padding: 30px 0;

  }

  #footer h3 {

    font-size: 36px;

    font-weight: 700;

    position: relative;

    font-family: "Poppins", sans-serif;

    padding: 0;

    margin: 0 0 15px 0;

  }

 #footer p {
    font-size: 15;
    font-style: italic;
    padding: 0;
    /*margin: 0 0 40px 0;*/
  }
  #footer .social-links {
    margin: 0 0 25px 0;
  }

  #footer .social-links a {

    font-size: 18px;

    display: inline-block;

    background: #566573;

    color: #fff;

    line-height: 1;

    padding: 8px 0;

    margin-right: 4px;

    border-radius: 50%;

    text-align: center;

    width: 36px;

    height: 36px;

    transition: 0.3s;

  }

  #footer .social-links a:hover {

    color: #566573;

    background: #eef7ff;

    text-decoration: none;

  }

  #footer .copyright {

    margin: 0 0 60px 0;

  }

  #footer .credits {

    font-size: 13px;

  }

  

  

  /*************

  corsor

  *****************/





.cursor {

    width: 50px;

    height: 50px;

    position: absolute;

    pointer-events: none;

    /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');*/

    background-image: url('https://arprovat.com/assets/img/blood2.png');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    transform-origin: center;

    transition: transform 0.3s ease-out;

}



.cursor:hover {

    transform: scale(1.2);

}



.cursor::after {

    content: "";

    width: 20px;

    height: 20px;

    position: absolute;

    border: 6px solid red;

    border-radius: 50%;

   

    top: -8px;

    left: -8px;

    animation: cursorAnim2 .5s infinite alternate;

}



@keyframes cursorAnim {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(.7);

    }

}



@keyframes cursorAnim2 {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(.4);

    }

}



@keyframes cursorAnim3 {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(3);

    }

    100% {

        transform: scale(1);

        opacity: 0;

    }

}



.expand {

    animation: cursorAnim3 .5s forwards;

    /*border: 1px solid red;*/

}



.glow { 

    border: 5px solid red;

    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);

    transition: box-shadow 0.5s ease;

}

/*end corsor*/



.portfolio-container{

    /*height: 868.159px !important;*/

}











.confirm-button-class {

    background-color: #DD6B55 !important;

}














.dock {
    z-index: 9999;
    bottom: 20px;
    width: auto;
    height: 60px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.dock .dock-container {
    padding:0 !important;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.4) 0%, rgba(241, 245, 249, 0.6) 100%);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 2px solid rgba(241, 245, 255, 0.99);
}

.dock .dock-container li {
    margin: 0 10px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    transition: all 0.3s ease-in-out;
    transform-origin: 50% 100%;
    position: relative;
}

.dock .dock-container li:hover {
    margin: 0 13px;
    transform: scale(1.2);
}

.dock .dock-container li .name {
    position: absolute;
    top: -70px;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.dock .dock-container li .name::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.7);
}

.dock .dock-container li:hover .name {
    visibility: visible;
    opacity: 1;
}

.dock .dock-container li .ico {
    font-size: 45px;
    color: #566573;
    transition: color 0.3s ease, transform 0.3s ease;
}

.dock .dock-container li:hover .ico {
    color: #566573;
    /*color: #eef7ff;*/
    transform: scale(1.1);
}


 .back_home{

     font-size:24px;

  padding: 5px 10px;

  color: #566573;

  border-radius: 50px;

  transition: 0.3s;

 }

 .back_home:hover{

    color: #566573;

    border:.5px solid #566573;

  background-color: color-mix(in srgb, #eef7ff, transparent 10%);

 }