@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Rubik:wght@300;400;600&display=swap');

:root {
    --primary-color: #FFED00;
    --secondary-color: #794afa;
    --secondary-dark-color: #010180;

    --white-color: #ffffff;
    --light-bg-color: #f2f3f5;
    --light-text-color: #7c899a;
    --border-color: #e5e8ec;
    --dark-color: #0a021c;


    --font-small: 13px;
    --font-smaller: 11px;

    --percent100: 100%;
    --percent50: 50%;

    --fw3: 300;
    --fw5: 500;
    --fw6: 600;
    --fw7: 700;
    --fw8: 800;

    --trans-background-color: background-color .3s, color .3s;
    --trans-background: background-color .3s;
    --trans-color: color .3s;

}

*{
    margin: 0;
    padding: 0;
}

*,::before,::after {
    box-sizing: border-box;
}

body {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dark-color);
    background-color: var(--white-color);
}

a{
    text-decoration: none;
    color: inherit;
}


ul{
    list-style: none;
}

img{
    max-width: var(--parcent100);
    vertical-align: middle;
}

strong{
    font-weight: var(--fw8);
}

table{
    border-collapse: collapse;
    border-spacing:0;

}

input::placeholder{
    font: inherit;
}

h1,h2,h3,h4{
    font-family: 'Poppins';
}

h1{
    font-size: calc(1.3em + 1vw);
    font-weight: var(--fw8);
    line-height: 1;

}
h2{
    font-size: 2.5em;
}

h3{
    font-size: 1.2em;
    font-weight: 100var(--fw7);
}

h4{
    font-style: 1em;
    font-weight: var(--fw6);
}


/* reusable selector */

.container{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0.938em;
}

.column{

    margin-left: -0.938em;
    margin-right: -0.938em;
}
.column .row {
    padding: 0 0.938em;
}

.flexwrap{
    display: flex;
    flex-wrap: wrap;
}

.flexcenter {
    display: flex;
    align-items: center;
    justify-content: center;
}


.flexitem {
    display: flex;
    align-items: center;
}

.flexcol {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.main-links a:hover{
    color: var(--secondary-color);
}

.second-links a:hover {
    color: var(--light-text-color);
}


.icon-small, .icon-large {

    display: flex;
    align-items: center;
    padding: 0 0.25em;
    font-weight: normal;
}

.icon-small {
    font-size: 1.25em;
    margin-left: auto;
}

.icon-large{
    font-size: 1.75em;
    padding: 0 0.75em 0 0;
}

.mobile-hide{
    display: block;
}

.mini-text {
    font-size: var(--font-smaller);
    color: var(--light-text-color);
}

.primary-button, .secondary-button, .light-button{
    font-size: var(--font-small);
    padding: 0.9em 2em;
    height: auto;
    width: fit-content;
    border-radius: 2em;
    transition: var(--trans-background-color);
}

.primary-button{
    background-color: var(--primary-color);
    color: var(--white-color);
}

.primary-button:hover {
    background-color: var(--dark-color);
}


.secondary-button{
    background-color: var(--secondary-dark-color);
    color: var(--white-color);
}

.secondary-button:hover {
    background-color: var(--light-bg-color);
    color: var(--secondary-dark-color);
}

.light-button{
    background-color: var(--light-bg-color);
}

.light-button:hover{
    background-color: var(--secondary-dark-color);
    color: var(--white-color);
}

.object-cover img{
    position: absolute;
    object-fit: cover;
    width: var(--percent100);
    height: var(--percent100);
    display: block;
}







/* header */

header li > a {
    display: flex;
    position: relative;
    line-height: inherit;
    transition: var(--trans-color);
}

.header-top .wrapper{
    font-size: var(--font-small);
    font-weight: var(--fw3);
    justify-content: space-between;
    line-height: 42px;
}

.header-top .wrapper ul {
    gap: 2em;
}

.header-top li {
    position: relative;
}

.header-top ul ul{
    position: absolute;
    left: -1em;
    line-height: 2em;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    z-index: 1;
    display: none;
}

.header-top .right ul ul li a{
    padding: 0.25em 1em;
}

.header-top .right ul ul li.current a{
    background-color: var(--border-color);
}

.header-top li:hover ul {
    display: block;
}


/* header nav */
.header-nav {
    padding: 0.5em 0;
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--border-color);
}

.trigger {
    font-size: 1.5em;
    display: flex;
    padding: 0.25em;
    margin-right: 0.5em;
}

.logo a{
    font-family: 'Poppins';
    font-size: 1.75em;
    position: relative;
    font-weight: var(--fw8);
    display: flex;
    padding-left: 0.75em;
    margin-right: 2em;
}

.circle{
    position: absolute;
    top: -15px;
    left: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--percent50);
    background-color: var(--light-bg-color);
    z-index: -1;
}

.circle::before {
    content: '';
    position: absolute;
    height: 28px;
    width: 28px;
    border-radius: var(--percent50);
    background-color: var(--secondary-color);
    bottom: 5px;
    right: 5px;
    opacity: .4;
}

.header-nav nav > ul {
    line-height: 100px;
    gap: 2em;
}
.fly-item{
    position: absolute;
    height: 16px;
    font-size: var(--font-smaller);
    padding: 3px;
    text-align: center;
    line-height: 10px;
    color: var(--white-color);
}

nav .fly-item {
    top: 50%;
    margin-top: -24px;
    width: 30px;
    border-radius: 3px;
    right: -32px;
    background-color: var(--primary-color);
}

.header-nav .right {
    position: relative;
    margin-left: auto;
}

.header-nav .right .icon-large{
    position: relative;
}

.header-nav .right .fly-item {
    top: 0;
    right: 16px;
    width: 16px;
    background-color: var(--secondary-dark-color);
    border-radius: var(--percent50);
}

/* header main */

.header-main {
    background-color: #453c5c;
    padding: 1.5em 0;
    margin-bottom: 2em;
}
.dpt-cat {
    position: relative;
    z-index: 10;
}

.dpt-cat .dpt-head {
    position: relative;
    width: 300px;
    padding: 0.75em 1.5em;
    background-color: var(--primary-color);
    border-radius: 7px 7px 0 0 ;
    color: #010180;
    margin-bottom: -2.15em;
}

.dpt-cat .dpt-head .mini-text {
    color: #010180;
}

.dpt-cat .dpt-trigger {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1.3em;
    height: 60px;
}

.dpt-menu{
    display: none;
}

.dpt-menu > ul >li > a {
    font-size: var(--font-small);
    height: 60px;
    align-items: center;
}









.header-main .right {
    flex: 1;
}
form{
    position: relative;
}

form.search input{
    line-height: 3.25em;
    padding: 0 7em 0 4.5em;
    border: 0;
    outline: 0;
    width: var(--percent100);
    border-radius: 7px;
    font-size: 0.9em;
    font-weight: var(--fw3);
}

form.search :where(span,button) {
    position: absolute;
    top: 0;
    padding: 0.55em 1.5em;
    font-size: 1em;
    color: #010180;
    height: var(--percent100);
}

form.search button {
    right: 0;
    border: 0;
    outline: 0;
    font-size: 0.875em;
    font-weight: var(--fw6);
    background-color: var(--primary-color);
    color: #010180;
    border-radius: 0 7x 7x 0;
    cursor: pointer;
    transition: var(--trans-background);
}
form.search button:hover{
    background-color: #FFED00;
}


/* main */

.slider > div > .wrapper{
    width: 100%;
    margin-left: auto;
}

.slider .item {
    width: 100%;
    position: relative;
    height: 474px;
}
/*.slider .item::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    width: 450px;
    height: 300px;
    background-color: var(--white-color);
    z-index: 1;
    filter: blur(50px);
    opacity: .88;
}*/

.slider .text-content{
    position: relative;
    top: 15%;
    height: var(--percent100);
    justify-content: flex-end;
    padding: 0 0 10% 10%;
    z-index: 1;
}

.slider .text-content h2{
    font-size: 28px;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--secondary-dark-color
    );
}


/* brands */

.brands .wrapper{
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 2em 0;
}
.brands .item img{
    opacity: .25;
    transition: opacity .3s;
}

.brands .item a:hover img{
    opacity: 1;
}


/* trending */

.sectop {
    justify-content: space-between;
    padding-bottom: 0.5em;
    margin-bottom: 2em;
    border-bottom: 1px solid var(--border-color);
}

.sectop h2 {
    position: relative;
    font-size: 1.5em;
    font-weight: var(--fw7);
}

.sectop h2 span:not(.circle) {
    padding: 0 0 0 2em;
}

.sectop h2 .circle {
    top: -10px;
}

/* products */

.product .offer {
    text-align: center;
    margin-bottom: 1.5em;
}

.products .offer p {
    text-transform: uppercase;
    margin-bottom: 0.5em;
}
.products .offer ul {
    gap: 1em;
}

.products .offer ul li {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    line-height: initial;
    color: var(--secondary-dark-color);
    background-color: var(--light-bg-color);
    border-radius: 5px;
}

.products .offer ul li:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -0.6em;
    color: var(--light-text-color);
}



/* feature */

.inner-block {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1px;
    padding-bottom: 3.5rem;
}

.heading-container {
    margin: 3.5rem 0;
    text-align: center;
}

.heading-2 {
    line-height: 1.2;
    font-weight: 600;
    font-size: 30px;
    font: azo-sans-web, Cantarell, Helvetica, sans-serif;
    color: #30424b;
}

.heading-extra {
    margin: 1rem auto 0 auto;
    padding: 0;
    color: #3a4d5e;
    font-weight: 400;
    line-height: 1.4;
    max-width: 60rem;
}
.new-tabs {
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.new-tabs__tab--active {
    border-bottom: 1px solid silver;
}

.new-tabs__tab {
    padding: 0.75rem 1.5rem;
    color: #30424b;
    font-weight: bold;
    text-decoration: none;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.grid-item {
    width: 100%;
    margin: 0.4rem 0.6rem;
    min-height: 14rem;
}
.grid-item__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.shadow {
    box-shadow: 0 2px 8px 1px rgba(0,0,0,0.04);
}

/* .aspect-ratio-60, .category-grid__item-image:before {
    padding-top: 60%;
} */


.grid-item__image {
    border-bottom-left-radius: 2rem;
    background: #d9e3eb none no-repeat center center;
    background-size: cover;
}
.grid-item__image img{
    width: 100%;
}
.grid-item__icon{
    text-align: center;
}
.grid-item__title {
    margin: 1.1em 1rem;
    font-weight: bold;
    font-size: 16px;
}
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.grid-item__description {
    flex-grow: 1;
    margin: 0 1rem 1rem 1rem;
    line-height: 1.4em;
}

.text-small {
    font-size: 11px;
}
.grid-item__link {
    margin: 0 1rem 1rem 1rem;
    font-weight: bold;
    font-size: 13px;
}
.chevron--right:after{
transform: rotate(45deg);
transform-origin: 50% 40%;
}
.chevron:after{
    content: '';
    margin: 0 0.5em;
    display: inline-block;
    height: 0.4em;
    width: 0.4em;
    border-top: 0.1em solid;
    border-right: 0.1em solid;

}

.block {
    background-color: rgb(235, 234, 234);
    
}
.inner-block {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1px;
    padding-bottom: 3.5rem;
    
}

.heading-container {
    margin: 3.5rem 0;
    text-align: center;
}

.grid-item__description {
    flex-grow: 1;
    margin: 0 1rem 1rem 1rem;
    line-height: 1.4em;
}


#sleeder{
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.sleeder-track{
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}
@keyframes scroll {
    0%{
        transform: translate(0);
    }100%{
        transform: translateX(calc(-250px * 9));
    }
}
#rotetd{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}
img {
    width: 100%;
    transition: transform 1%;
}
img:hover{
    transform: translateZ(20px);
}
#sleeder::before,
#sleeder::after{
    background: linear-gradient(to right,rbga(255,255,255,1)0%,
    rgba(255,255,255,0)100%);
    content: '';
    height: 100%;
    position: absolute;
    width: 15%;
    z-index: 2;
}
#sleeder::before{
    left: 0;
    top: 0;
}
#sleeder::after{
    right: 0;
    top: 0;
    transform: rotatez(180deg);
}
.heading{
    text-align: center;
    line-height: 1.1;
    font-weight: 550;
}


#slider_container .container{
    padding: 50px 15px;
    max-width: 1230px;
    margin: 0 auto;
}


.checked{
    color: orange;
    text-align: center;
}
.retting_star{
   padding-top: 25px;
   padding-left: 5px;
}
.card_b{
    background-color: rgb(255, 234, 234);
    border-radius: 20px;
    overflow: hidden !important;
    height: auto;
}
.heading{
    font-weight: bold;
    padding:15px;
    left: 10px;
    
}
.author{
    text-align: center;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 12px;
    margin-top: 30px;
   
}
.data-bg{
    width: 100%;
    height: 40rem;
    background: var(--secondary-dark-color);
   
}
.heading_container{
    line-height: 1.2;
    font-weight: 600;
    color: #23F0C7;
    margin: 2em auto;
    font-size: 15px;
    text-align: center;
    padding-top: 5rem;
}
.heading-container .heading-2{
    line-height: 1.2;
    font-weight: 600;
    margin-top: 10px;
    
}
.heading-2{
    padding-bottom: 1rem;
}
/* .swiper {
    width: 50rem;
    height: 15rem;
    
  } */

  .swiper-slide {
    text-align: center;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  

/* footer */
.heading-2 heading--margin turquoise{
    line-height: 1.2;
    font-weight: 400;
    
}
.turquoise{
    color: #23F0C7;
}
.footer {
    padding: 2rem 1rem 3rem 1rem;
    margin-top: 2rem;
    background: #453C5C;
    z-index: 7;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.footer__logo{
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-container__content, .footer__content {
    width: 100%;
    margin: 0 auto;
    z-index: 3;
    padding: 0 2rem;

}

.footer-grid {
    display: flex;
    justify-content: space-around;
    color: white;
}

.footer-heading {
    font-size: 36px;
    margin: 2rem 0 1rem 0;
    color: white;
}

.footer-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}


















@media only screen and (min-width: 768px){
.grid-item--3c-m {
    width: Calc(33.33% - 0.8rem);
    margin: 0.4rem;
}
}


@media screen and (min-width: 992px){
    .container{
        padding: 0 2em;
    }
    .desktop-hide{
        display: none;
        
    }
    .mobile-hide{
        display: block;
    }
    .logo a{
        margin-right: 2em;
    }
    .header-nav{
        padding: 0;
        margin: 0;
        border-bottom: 0;
    }
    .header-nav .right li > a {
        margin-left: 1em;
    }
    .header-main .right {
        max-width: 600px;
        margin-left: auto;
    }
    /* dpt menu */

    .dpt-menu {
        position: absolute;
        top: var(--percent100);
        width: 300px;
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-top: 0;
        border-bottom: 0;
    }
    .dpt-menu > ul >li > a {
        font-weight: var(--fw5);
        padding: 0 1.5em;
        border-bottom: 1px solid var(--border-color);
    }
    
}
.swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    #hire-categories{
        display: none;
    }
    
    .img_box img{
        max-width: 100%;

    }
    .slider_container .container{
        padding: 0 15px;
        max-width: 1230px;
        margin: 0 auto;
    }
    .card_slider{
        padding: 50px 0;
    }
    .image-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 15px; /* Optional: Add some padding inside the container */
    }
    
    .image-container img {
        width: 90%; /* Set the width and height as needed */
        height: 250px;
    }
    
    .image-container img:not(:last-child) {
        margin-right: 0px; /* Optional: Add some spacing between images */
    }
/* .card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 25%;
  }
  
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  .container {
    padding: 2px 16px;
  } */
/* styles.css */

/* Basic styles for the cards */

@media screen and (max-width: 768px) {
   .card_b{
    height:69vw;
   }
}

@media screen and (max-width: 480px) {
    .card_b{
        height:74vw;
       }
}
.about-img{background-image: url(wallpaperflare.com_wallpaper.jpg); height: 25vw;}
.about-img span{font-size: 4vw; color: white; position: absolute; top:23rem; right: 36rem;}
.about-cont{text-align: center;position: relative; top: 3vw;margin-bottom: 5rem;}