@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components{
    .container{@apply mx-auto px-4}
    .btn{ @apply px-10 py-3 text-center font-semibold inline-block}
    .btn-primary{ @apply bg-theme-primary border border-theme-primary text-white}
    .btn-primary:hover{@apply bg-transparent}
    .btn-black.btn-primary:hover{@apply text-theme-black !important}
    .btn-primary-o{@apply border border-theme-primary text-white}
    .btn-primary-o:hover{@apply bg-theme-primary}
    .card{@apply bg-white p-6}
}
@layer utilities{
    a, a *, button, .animate{ @apply transition-all duration-500 ease-in-out;}
    p{ @apply text-theme-gray}
}

/* Header */
header{ background: url('../images/hero-bg.png') no-repeat center center; @apply bg-cover relative; }
.top_strip{@apply py-6 relative z-[2];}
.top_strip nav>ul>li{@apply overflow-hidden;}
.top_strip nav>ul>li>a{@apply text-white font-semibold py-2 px-2 lg:px-3 }
.top_strip nav>ul>li>a:hover{@apply text-theme-primary}
.dropdown-menu{ @apply relative}
.dropdown-menu:after{@apply text-white ml-[-.5rem] opacity-50 ; content: "\f107"; font: normal normal normal 14px/1 FontAwesome }
.sub-menu{ @apply absolute transition-all duration-300 ease-in-out top-32 left-0 min-w-64 p-6 bg-white shadow-lg opacity-0 z-[-100];}
.dropdown-menu:hover{@apply overflow-visible}
.dropdown-menu:hover .sub-menu{ @apply top-10 opacity-100 z-auto; }
.sub-menu a{ @apply py-2 block relative }
.search{@apply text-center w-10 h-10 rounded-full leading-[2.5rem] bg-white/[.05];}

.banner_cnt{@apply pt-40 pb-48 w-full lg:w-1/2 mx-auto text-center text-white relative z-[1] }
.banner_cnt .sub_heading{@apply text-theme-primary uppercase font-semibold;}
.banner_cnt .sub_heading:after, .banner_cnt .sub_heading:before{@apply inline-block bg-theme-primary h-[2px] w-12 align-[4px] ; content: ''; }
.banner_cnt .sub_heading:after{@apply ml-3}
.banner_cnt .sub_heading:before{@apply mr-3}
.banner_cnt h2{@apply font-bold text-7xl mt-4 mb-6}
.banner_cnt p{ @apply text-zinc-300 font-medium mb-12}
#particles-js { @apply absolute w-full h-full opacity-50; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;  }
#stats{@apply opacity-0 -z-0 !important}

/* Main section */
.sub_heading_l{ @apply text-theme-primary font-semibold;}
.sub_heading_l:after{ @apply h-[2px] w-10 inline-block bg-theme-primary ml-4 relative top-[-5px] ; content: '';}
.burger{@apply sm:py-20 py-12}

.section_head{@apply w-full md:w-2/3 lg:w-1/2 mx-auto}
.sub_heading{ @apply text-theme-primary font-semibold;}
.sub_heading:after, .sub_heading:before{ @apply h-[2px] w-10 inline-block bg-theme-primary relative top-[-5px] ; content: '';}
.sub_heading:after{@apply  ml-4}
.sub_heading:before{@apply  mr-4}
.section_head h2{@apply text-5xl font-bold text-theme-black mt-6}

.service_card{ background: url('../images/service-box-bg.png') #fff no-repeat right top;}
.service_card h3{@apply text-2xl font-semibold text-black/[.8]}
.service_card p{@apply text-theme-gray my-4}
.readmore{@apply relative font-medium}
.readmore i{@apply text-theme-primary align-[-1px]}
.readmore:hover i{@apply ml-2}

.team_card{ @apply relative}
.team_card>a{ @apply absolute top-0 left-0 right-0 bottom-0 z-[1] hidden}
.team_img{ @apply relative w-full overflow-hidden }
.team_img .social_link{@apply absolute bottom-[-50px] justify-center w-full}
.team_img .social_link a{@apply bg-theme-primary}
.team_img .social_link a:hover{@apply bg-white}
.team_img .social_link a:hover i{@apply text-theme-primary !important}
.team_nm{@apply text-center py-8 bg-white}
.team_nm h4{@apply font-semibold text-lg}
.team_nm span{@apply text-theme-primary}
.team_card:hover .team_img{ @apply bg-black/[.8]}
.team_card:hover .team_img .social_link{ @apply bottom-2}
.team_card:hover .team_img img{@apply opacity-70}

.bg_gradient{@apply bg-gradient-to-b from-white via-white to-slate-50}

.service_icon{ @apply p-6 text-center; background: url('../images/blob.svg') no-repeat center; background-size: 100% 100%;}
.service_icon img{ @apply w-48 h-auto}

.tab_link a{ @apply pt-2 pb-1 border-b text-theme-gray border-b-black/[.2] font-medium}
.tab_link a:hover{@apply text-theme-primary border-b-theme-primary}

.project{@apply relative overflow-hidden bg-slate-300}
.project_img{@apply w-full h-auto overflow-hidden aspect-[4/3] relative text-center;}
.project_img img{@apply max-w-full w-auto h-full object-cover  }
.project_cnt{@apply absolute left-0 bottom-[-100%] bg-slate-800/[.8] px-6 pt-12 pb-6 w-full; clip-path: polygon(0 0, 0% 100%, 100% 100%);}
.project:hover .project_cnt{@apply bottom-0}
.project_cnt h4{@apply font-semibold text-white}
.project_cnt span{@apply text-theme-primary}

.client_logo img{filter: grayscale(0);}
.client_logo img:hover{filter: grayscale(0);}

/* Footer Code */
.footer, .footer a{color: #FFFFFF99}
.footer a:hover{@apply text-white}
.footer_navigation{ @apply pt-16 pb-12 }
.footer_col i{@apply mr-3 text-theme-primary text-sm;}
.social_link a{ @apply inline-block text-center w-10 h-10 rounded-full leading-[2.5rem] bg-white/[.05] my-2;}
.social_link a i{@apply mr-0 text-white !important;}
.social_link a:hover{@apply bg-theme-primary}
.footer_col h3{ @apply font-semibold text-white mb-8 text-2xl }
.footer_col li a{@apply inline-block py-2; }
.copyright{@apply py-10 text-center; border-top: 1px solid rgba(255,255,255,.05);}

@media (min-width: 767px) {
    .sub-menu a:hover{@apply pl-6}
    .sub-menu a:before{ @apply transition-all duration-300 ease-in-out inline-block h-[2px] w-4 bg-theme-primary opacity-0 absolute top-5 -left-5 ;content: '';}
    .sub-menu a:hover:before{@apply opacity-100 left-0}
}
@media (max-width: 767px) {
    .banner_cnt{@apply py-40}
    .menu{@apply absolute top-20 left-0 w-full bg-white p-4 overflow-y-auto z-[1]; max-height: calc(100vh - 80px);}
    .top_strip nav>ul>li>a{ @apply text-theme-black px-2 block}
    nav .sub-menu{@apply relative block opacity-100 top-0 py-0 pl-8 min-w-0 z-auto shadow-none !important}
    .footer_navigation{ @apply pb-4 }
    .section_head h2{@apply text-4xl}
    .blog{@apply my-3}
}
@media (max-width: 600px) {
    .banner_cnt{@apply pt-32}
    .banner_cnt .sub_heading{@apply text-sm}
    .banner_cnt .sub_heading:after, .banner_cnt .sub_heading:before{@apply w-8}
    .banner_cnt h2{@apply text-[2rem]}
    .btn{@apply px-7 py-[.75rem]}
    .section_head h2{@apply text-3xl}
}