@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
       url("../fonts/Linearicons-Free.woff") format("woff"),
       url("../fonts/Linearicons-Free.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
  font-family: "Linearicons-Free";
  src: url("../fonts/Linearicons-Free.eot");
  src: url("../fonts/Linearicons-Free.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Linearicons-Free.woff2") format("woff2"),
       url("../fonts/Linearicons-Free.woff") format("woff"),
       url("../fonts/Linearicons-Free.ttf") format("truetype"),
       url("../fonts/Linearicons-Free.svg#Linearicons-Free") format("svg");
  font-weight: normal;
  font-style: normal;
}

*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;}
ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

body{
    font-family:'Poppins', Helvetica, sans-serif;
    height:100vh;
    overflow:hidden;
    background: linear-gradient(to top, #4a00e0, #8e2de2);
}

.preloader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#222;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.circle{
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,#8e2de2,#4a00e0);
    animation:zoomCircle 1.4s infinite ease-out;
}

@keyframes zoomCircle{

    0%{
        transform:scale(0);
        opacity:1;
    }

    70%{
        transform:scale(1.3);
        opacity:0.5;
    }

    100%{
        transform:scale(1.5);
        opacity:0;
    }

}

/* CSS: initial background */
.bg-animation {
    position: fixed;
    width: auto;
    height: auto;
    top: -18px;
    left: -18px;
    right: -18px;
    bottom: -18px;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1), transparent 40%),
        url('../main_bg.png'); 
    background-size: cover;
    background-repeat: no-repeat;
	z-index: -1;
    transition: transform 0.1s linear;
}

.main-wrapper{
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0 122px;
	padding-left: 30px;
    overflow: hidden;
}

.main-wrapper {
    opacity: 0;          /* initially hidden */
    transition: opacity 0.6s ease-in-out; /* smooth fade */
}
.main-wrapper.visible {
    opacity: 1;          /* fade in */
}

.page-wrapper{
    position:relative;
    width:100%;
	padding: 0;
	max-width: 1280px;
    height:80vh;
    margin:10vh auto;
    display:flex;
    overflow:visible;
	border-radius:30px;
	background: linear-gradient(#444444, #444444);
	backface-visibility: hidden;
}

/* Right panel */
.right-panel{
    position:fixed;
    top:0;
    right:-300px;
    width:300px;
    height:100%;
    background:#222;
    transition:0.4s;
    z-index:99;
    padding:20px;
    color:#fff;
}
/* Toggle button */
.right-panel-toggle{
    position:fixed;
    top:20px;
    right:0;
    width:48px;
    height:48px;
	background-color: #222;
	border: 2px solid #444;
    border-right-width: 0;
    border-radius: 10px 0 0 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    cursor:pointer;
    transition:0.4s;
    z-index:99;
}

.right-panel-toggle span{
    width:19px;
    height:2px;
    background:#b5b6b7;
    border-radius:3px;
    transition:0.3s;
    position:relative;   /* এটা add করতে হবে */
}
.right-panel-toggle span:before {
    content:'';
    width:2px;
    height:2px;
    background-color:#aaa;
    position:absolute;
    left:-5px;
    top:50%;
    transform:translateY(-50%);
    border-radius:5px;
}
.active span:before {
	width: 6px;
    height: 2px;
    left: -3px;
}
/* X animation */
.right-panel-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.right-panel-toggle.active span:nth-child(2){
    opacity:0;
}

.right-panel-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}

/* active state */
.right-panel.active{
    right:0;
}

/* toggle move left same distance */
.right-panel-toggle.active{
    right:300px; /* panel width + gap */
}

/* Search Box */
.search-box {
    position: relative;
    margin-bottom: 20px;
}

.search-box input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    outline: none;
}

.search-box input::placeholder {
    color: #aaa;
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #d5d6d7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Card */
.card {
    background: #2a2a2a;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #3a3a3a;
}
.card .block-title {
    margin-bottom: 0;
}
.card .block-title:after {
    left: -1%;
}
/* Title */
.card .block-title h3 {
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    margin-left: 8px;
}

/* List */
.card ul {
    padding-left: 15px;
    margin: 0;
}

.card ul li {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    list-style: none;
    padding-left: 15px;
}

/* Purple bullet */
.card ul li::before {
    content: '';
    position: absolute;
    left: 0px;
    border: 2px solid #0ba376;
    height: 3px;
    width: 3px;
    border-radius: 8px;
    display: inline-block;
    top: 7px;
}

/* PROFILE CARD */
.profile-card{
    width:30%;
    padding:40px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    position:relative;

    overflow-y:auto;   /* vertical scroll */
    overflow-x:hidden; /* horizontal scroll hide */
}

.profile-img{
    width:150px;
    height:150px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    border:3px solid #fff;
    position:relative;

    overflow:visible; /* hidden না */
}
.profile-img:after{
    content:'';
    position:absolute;
    top: 5%;
    left: 5%;
    width:150px;
    height:150px;
    border-radius:50%;

    opacity:0.3;

    background-image:repeating-radial-gradient(
        circle,
        #fff,
        #fff 1px,
        transparent 1px,
        transparent 6px
    );

    background-size:6px 6px;

    z-index:0; /* -1 বাদ দাও */
}
.profile-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    position:relative;
    z-index:1;
}
.profile-card h2{
    color:#fff;
    margin-bottom:5px;
	font-size: 25px;
}

.profile-card p{
    color:#aaa;
    margin-bottom:15px;
	font-size: 17px;
}

.social a{
    margin:0 10px;
    color:#fff;
	font-size: 20px;
    cursor:pointer;
	font-weight: 800;
}

.cv-btn{
    margin:25px 30px;
    padding:10px;
    border:2px solid #fff;
    background:transparent;
    color:#fff;
    border-radius:30px;
    cursor:pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, .3);
}

.cv-btn:hover{
    background:#fff;
    color:#000;
}

.copyright {
    color: #fff;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0 5px;
    line-height: 14px;
    font-size: 12px;
    text-align: center;
	margin-top:auto;
}

/* ===============================
   CONTENT AREA
================================ */
.content-area{
    border-radius:30px;
    width:70%;
    position:relative;
    background:#222;
    overflow:hidden;
}

/* ===============================
   --- RIGHT ---
================================ */
@keyframes slideRightIn { 0%{ transform:translateX(100vw); opacity:0; } 100%{ transform:translateX(0); opacity:1; } }
@keyframes slideRightOut{ 0%{ transform:translateX(0); opacity:1; } 100%{ transform:translateX(-100vw); opacity:0; } }

.content-area.slide-right-in{ animation: slideRightIn .5s ease forwards; }
.content-area.slide-right-out{ animation: slideRightOut .5s ease forwards; }

/* ===============================
   --- LEFT ---
================================ */
@keyframes slideLeftIn { 0%{ transform:translateX(-100vw); opacity:0; } 100%{ transform:translateX(0); opacity:1; } }
@keyframes slideLeftOut{ 0%{ transform:translateX(0); opacity:1; } 100%{ transform:translateX(100vw); opacity:0; } }

.content-area.slide-left-in{ animation: slideLeftIn .5s ease forwards; }
.content-area.slide-left-out{ animation: slideLeftOut .5s ease forwards; }

/* ===============================
   --- UP ---
================================ */
@keyframes slideUpIn { 0%{ transform:translateY(100vh); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
@keyframes slideUpOut{ 0%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(-100vh); opacity:0; } }

.content-area.slide-up-in{ animation: slideUpIn .5s ease forwards; }
.content-area.slide-up-out{ animation: slideUpOut .5s ease forwards; }

/* ===============================
   --- DOWN ---
================================ */
@keyframes slideDownIn { 0%{ transform:translateY(-100vh); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
@keyframes slideDownOut{ 0%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(100vh); opacity:0; } }

.content-area.slide-down-in{ animation: slideDownIn .5s ease forwards; }
.content-area.slide-down-out{ animation: slideDownOut .5s ease forwards; }

/* ===============================
   --- ZOOM ---
================================ */
@keyframes zoomIn { 0%{ transform: scale(0.85); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
@keyframes zoomOut{ 0%{ transform: scale(1); opacity:1; } 100%{ transform: scale(0.85); opacity:0; } }

.content-area.zoom-in{ animation: zoomIn .5s ease forwards; }
.content-area.zoom-out{ animation: zoomOut .5s ease forwards; }

/* ===============================
   --- ROTATE ---
================================ */
@keyframes rotateIn { 0%{ transform: rotate(-15deg) scale(0.9); opacity:0; } 100%{ transform: rotate(0) scale(1); opacity:1; } }
@keyframes rotateOut{ 0%{ transform: rotate(0) scale(1); opacity:1; } 100%{ transform: rotate(15deg) scale(0.9); opacity:0; } }

.content-area.rotate-in{ animation: rotateIn .5s ease forwards; }
.content-area.rotate-out{ animation: rotateOut .5s ease forwards; }

/* ===============================
   --- FLIP ---
================================ */
@keyframes flipIn { 0%{ transform: rotateY(90deg); opacity:0; } 100%{ transform: rotateY(0deg); opacity:1; } }
@keyframes flipOut{ 0%{ transform: rotateY(0deg); opacity:1; } 100%{ transform: rotateY(-90deg); opacity:0; } }

.content-area.flip-in{ animation: flipIn .5s ease forwards; transform-origin: left; }
.content-area.flip-out{ animation: flipOut .5s ease forwards; transform-origin: left; }

.section{
    position:absolute;
    width:100%;
    height:100%;
    padding:60px;
    opacity:0;
    transition:opacity .3s ease;
    color:#fff;
    z-index:1;
	
    overflow:hidden;              /* hide scrollbar */
	scrollbar-gutter: stable; /* prevents content shift */
}

@media only screen and (max-width: 1025px) {
.section{
    overflow-y:auto;   /* vertical scroll */
}
}
@media only screen and (min-width: 1025px) {
.section{
	padding-right: 30px;
}
.section:hover{
    overflow-y:auto;   /* vertical scroll */
}
/* Scrollbar width */
.section::-webkit-scrollbar{
    width:35px; /* fixed size */
}

/* track */
.section::-webkit-scrollbar-track{
    background:transparent;
    margin:30px 0;
}
/* track */
.section::-webkit-scrollbar-track:hover{
    background:#fff;
    margin:30px 0;
	border:11px solid transparent;     /* gap */
    background-clip:content-box;
    border-radius:50px;
}

/* thumb */
.section::-webkit-scrollbar-thumb{
    background:#555;
    border-radius:50px;

    border:15px solid transparent;     /* gap */
    background-clip:content-box;

    transition:background 0.3s, opacity 0.3s;
    opacity:0.6;
}

/* hover → ONLY color & opacity change */
.section::-webkit-scrollbar-thumb:hover{
    background:#5e2fd6;
    border:14px solid transparent;     /* gap */
    background-clip:content-box;
    opacity:1;
}
}
.section.active{
    opacity:1;
    z-index:2;
}

.section h1{
    font-size:32px;
    margin-bottom:20px;
}
.section h1 span {
    color: #5e2fd6;
}
#home {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* vertical center */
    align-items: center;      /* horizontal center */
    text-align: center;       /* text center */
    /* prevent layout shift */
    min-height: 100%;        /* সর্বদা section-এর পুরো height নেবে */
}
#home h1{ margin-bottom: 5px;font-size:40px; }
#home h3 {
    min-height: 30px;  /* typing-এর জন্য জায়গা ধরে রাখবে */
    margin: 10px 0 0 0;
    font-weight: 400;
    color: #888;
    font-size: 21px;
}

.page-title{
    position:relative;
    display:inline-block;
    z-index:1; /* text layer */
}

.page-title:after{
    content:'';
    position:absolute;
    top: -5%;
    left: -10px;
    height:25px;
    width:25px;

    background-image:repeating-radial-gradient(circle at center,#5e2fd6,#8e2de2 1px,transparent 0px,transparent 100%);
    background-size:6px 6px;

    opacity:0.45;
    z-index:-1; /* text এর পিছনে যাবে */
}

/* SECTION BASE */
.section-content{
    width:100%;
}

.page-title h1{
    font-size:32px;
    margin-bottom:30px;
}

.page-title span{
    color:#ff4c60;
}

/* ROW FLEX */
.row{
    display:flex;
    flex-wrap:wrap;
    gap:5%;
}
@media (min-width:575px){
/* COLUMN WIDTHS */
.left-content-60{
    max-width: 58%;
}
.left-content-60 p{
    color:#d5d5d5;
}
.right-content-70{
	width: 65%;
}
.right-content-40{
    max-width: 37%;
}

.left-content-50,.right-content-50{
    width:47.499999%;
}

.left-content-30,
.center-content-30,
.right-content-30{
    width:30%;
}
}
/* SPACING */
.space-50{
    height:50px;
}

.space-30{
    height:30px;
}

/* INFO LIST */
.info-list ul{
    list-style:none;
    padding:0;
    margin:0;
}

.info-list li{
    display:flex;
    padding:8px 0;
}

.info-list .title{
    font-weight:600;
	margin-right: 10px;
	color: #5e2fd6;
}

.info-list .value{
    color:#d5d5d5;
}

/* SERVICES BLOCK */
.info-list-w-icon{
    display:block;
    flex-direction:column;
    gap:25px;
	margin-bottom: 25px;
}
.info-block-w-icon{
	margin-bottom: 25px;
}

.lnr-store:before {
    content: "\e82d";
}
.lnr-laptop-phone:before {
    content: "\e83d";
}
.lnr-pencil:before {
    content: "\e802";
}
.lnr-flag:before {
    content: "\e817";
}
.lnr-heart:before {
    content: "\e813";
}
.lnr-clock:before {
    content: "\e864";
}
.lnr-star:before {
    content: "\e814";
}
.ci-icon{
    font-size:28px;
	color:#5e2fd6;
}
.info-block-w-icon i {
    position: relative;
    font-size: 42px;
    color: #5e2fd6;
    opacity: .7;
}
.ci-text h4{
    margin:0 0 8px;
    font-size:18px;
}

.ci-text p{
    font-size:.95em;
    line-height:1.6;
    color:#d5d5d5;
}

/* FUN FACTS */
.fun-fact{
    text-align:center;
    padding:25px;
    border-radius:12px;
    background:#333;    padding: 25px 10px 15px;
    border: 2px solid #444;
}
.fun-fact:hover {
    /* -webkit-transform: translateY(-5px); */
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
    /* -webkit-box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12); */
    -moz-box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12);
    -o-box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12);
    box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12);
}

.fun-fact i{
    font-size:32px;
    margin-bottom:10px;
    color:#5e2fd6;
}

.fun-fact h4{
    margin:10px 0;
}

.fun-fact-block-value{
    font-size:22px;
    font-weight:700;
}

/* BLOCK TITLE */
.block-title{
    margin-bottom:25px;
    position: relative;
    display: inline-block;
    z-index: 1;
}

.block-title h3{
    font-size:24px;
}

.block-title span{
    color:#5e2fd6;
}

.block-title:after{
    content:'';
    position:absolute;
    top: -5%;
    left: -10px;
    height:20px;
    width:20px;

    background-image:repeating-radial-gradient(circle at center,#5e2fd6,#8e2de2 1px,transparent 0px,transparent 100%);
    background-size:6px 6px;

    opacity:0.45;
    z-index:-1; /* text এর পিছনে যাবে */
}
/* RESPONSIVE */
@media (max-width:575px){

.left-content-60,
.right-content-40,
.right-content-50,
.right-content-70,
.left-content-30,
.center-content-30,
.right-content-30{
    width:100%;
}

.row{
    flex-direction:column;
}
}
/* ===== Timeline ===== */
.timeline {
  position: relative;
  padding-left: 20px;
}

.timeline:before {
  content: '';
  position: absolute;
  left: 148px;
  top: 0;
  width: 1px;
  height: 100%;
  background: #444;
}

.timeline-item {
  display: flex;
  margin-bottom: 40px;
  position: relative;
}

/* left side */
.left-part {
  width: 120px;
  text-align: right;
  padding-right: 20px;
}

.item-period {
  font-size: 14px;
  color: #bbb;
}

.item-company {
  font-size: 13px;
  color: #777;
}

/* dot */
.divider {
  width: 20px;
  position: relative;
}

.timeline-second-style .divider:before {
    content: '';
    display: block;
    position: absolute;
    margin-top: 4px;
    width: 17px;
    height: 17px;
    position: absolute;
    border-radius: 10px;
    background-color: #5e2fd6;
    opacity: .25;
    z-index: 0;
}
.timeline-second-style .divider:after {
    content: '';
    display: block;
    position: absolute;
    margin-top: 8px;
    width: 5px;
    height: 5px;
    margin-left: 4px;
    background-color: #222;
    border-radius: 5px;
    border: 2px solid #5e2fd6;
    z-index: 1;
}
/* right content */
.right-part {
  flex: 1;
  padding-left: 20px;
}

.item-title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}

.right-part p {
  font-size: 14px;
  color: #aaa;
  line-height: 1.6;
  padding-bottom: 10px;
}

/* ===== Skills ===== */
.skills-info {
  margin-bottom: 30px;
}

.skill {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.skill h4 {
  font-size: 14px;
  color: #fff;
}

.skill-value {
  font-size: 12px;
  color: #aaa;
}

/* bar container */
.skill-container {
  width: 100%;
  height: 6px;
  background: #333;
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
}
.skills-second-style .skill-container {
    position: relative;
    display: inline-block;
    background-color: #222;
    border: 1px solid #5e2fd6;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 10px;
    margin-bottom: 8px;
    width: 100%;
}
.skills-second-style .skill-container:before {
    content: '';
    position: absolute;
    background-color: #5e2fd6;
}
/* progress */
.skills-second-style .skill-percentage {
    background-color: #5e2fd6;
    border: 2px solid #222;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    height: 8px;
    padding: 0;
}

/* individual widths */
.skill-1 .skill-percentage { width: 99%; }
.skill-2 .skill-percentage { width: 65%; }
.skill-3 .skill-percentage { width: 90%; }
.skill-4 .skill-percentage { width: 50%; }

.skill-5 .skill-percentage { width: 60%; }
.skill-6 .skill-percentage { width: 80%; }
.skill-7 .skill-percentage { width: 95%; }
.skill-8 .skill-percentage { width: 10%; }
.skill-9 .skill-percentage { width: 10%; }

/* ===== Knowledge ===== */
.knowledges {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
}

.knowledges li {
    display: inline-block;
    background-color: #5e2fd6;
    border-radius: 3px;
    color: #fff;
    padding: 5px 10px;
    margin: 3px 2px;
    font-size: 13px;
}

/* spacing */
.white-space-10 { height: 10px; }
.white-space-50 { height: 50px; }


/* Grid Layout */
.blog-masonry {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  position: static !important;
  height: auto !important;
}

.blog-masonry .item {
  position: static !important;
}

/* Card Design */
.blog-card {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Image Section */
.media-block {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 12px;
}

.media-block img {
  width: 100%;
  display: block;
  transition: all .3s ease-in-out;
}

.media-block:hover img {
  transform: scale(1.1);
}

/* Overlay Mask Base Style */
.media-block .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, background 0.3s ease;
  pointer-events: none;
  z-index: 5;
}

/* Global Linearicons Book Icon Definition (Must be outside media queries) */
.mask .lnr-book:before {
  content: "\e828" !important;
}

/* Book Icon Inside Mask Center Alignment */
.blog-card .media-block .mask i.lnr-book {
  font-family: "Linearicons-Free" !important;
  font-size: 36px !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  font-style: normal;
  font-weight: normal;
}

/* Hover Effect for Desktop */
.blog-card:hover .mask {
  opacity: 1;
}

.blog-card:hover .mask i.lnr-book {
  transform: scale(1);
}

/* Category Badge */
.category {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.category a {
  background-color: #222;
    color: #f5f5f5;
	border-radius: 3px;
  font-size: 12px;
  padding: 4px 10px;
  text-decoration: none;
  font-weight: 500;
}

/* Post Info */
.post-info {
  padding: 20px 0;
}

/* Date */
.post-date {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 8px;
}

/* Title */
.blog-item-title {
  font-size: 18px;
  color: #fff;
  line-height: 1.4;
  margin: 0;
  transition: 0.3s;
}

.blog-item-title:hover {
  color: #5e2fd6;
}

/* See All Posts Button Style (Matching Form Button Theme) */
.btn-see-all {
  display: inline-block;
  padding: 12px 30px;
  background: transparent;
  color: #fff;
  border: 2px solid #5e2fd6;
  border-radius: 30px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-family: 'Poppins', Helvetica, sans-serif;
  cursor: pointer;
}

.btn-see-all:hover {
  background: #5e2fd6;
  color: #fff;
  border-color: #5e2fd6;
  box-shadow: 0px 12px 15px -8px rgba(94, 47, 214, 0.4);
}
/* Responsive Grid & Mobile View Fix */
@media (max-width: 768px) {
  .blog-masonry {
    grid-template-columns: 1fr;
  }
}


/* --- Portfolio --- */
.portfolio-filters {
  margin-bottom: 30px;
}

.portfolio-filters li {
  display: inline-block;
  margin-right: 15px;
  font-size: 13px;
  opacity: 0.7;
}

.portfolio-filters li.active {
  opacity: 1;
}

.portfolio-filters li a {
  color: #aaa;
  cursor: pointer;
}

.portfolio-grid {
  margin-left: -7px;
  margin-right: -7px;
}

.portfolio-grid figure {
  width: 33.33333%;
  float: left;
  padding: 7px;
  position: relative;
  overflow: hidden;
}

.portfolio-grid.one-column figure {
  width: 100%;
}

.portfolio-grid.two-columns figure {
  width: 50%;
}

.portfolio-grid.three-columns figure {
  width: 33.33333%;
}

.portfolio-grid.four-columns figure {
  width: 25%;
}

.portfolio-grid.five-columns figure {
  width: 20%;
}

.portfolio-grid img {
  position: relative;
  display: block;
  width: 100%;
}

.portfolio-grid figure a,
.portfolio-rid figure img {
  display: block;
  position: relative;
}

.portfolio-grid figure img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure:hover img {
  transform: scale(1.1);
}

.portfolio-grid figure a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 3;
}

.portfolio-item-img {
  position: relative;
  overflow: hidden;
}

.portfolio-grid figure .portfolio-item-img:after {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, .05);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure:hover .portfolio-item-img:after {
  opacity: 1;
}

.portfolio-item-desc {
  margin-top: 12px;
}

.portfolio-item-desc h4 {
  margin-bottom: 0;
}

.portfolio-item-desc small {
  color: #888;
}

.portfolio-grid figure i {
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 16px;
  opacity: 0;
  width: 30px;
  height: 30px;
  background-color: #222;
  color: #5050f5;
  text-align: center;
  line-height: 30px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure .name {
  display: block;
  padding: 15px 0;
  font-size: 16px;
  position: relative;
}

.portfolio-grid figure .category {
  display: inline-block;
  padding: 2px 7px;
  background-color: #222;
  color: #f5f5f5;
  font-size: 11px;
  line-height: 1.2em;
  top: 15px;
  left: 15px;
  position: absolute;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.portfolio-grid figure:hover i,
.portfolio-grid figure:hover .name,
.portfolio-grid figure:hover .category {
  opacity: 1;
}

.portfolio-section{
    width:100%;
}

/* TABS */
.portfolio-tabs{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.tab-btn{
    background:none;
    border:none;
    color:#888;
    font-size:15px;
    cursor:pointer;
    transition:.3s;
    position:relative;
    padding:0;
}

.tab-btn:hover{
    color:#fff;
}

.tab-btn.active{
    color:#fff;
}

.tab-btn.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:2px;
    background:#fff;
}

/* GRID */
.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

/* CARD */
.portfolio-card{
    transition: transform .35s ease, opacity .35s ease;
    opacity: 1;
    transform: scale(1);
}

.portfolio-card.hide{
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}

.card-image{
    overflow:hidden;
    border-radius:2px;
    background:#222;
    position:relative;
    border-radius:10px;
}

/* overlay layer */
.card-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.0);
    transition:.3s ease;
}

/* icons */
.icon{
    position:absolute;
    top:10px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.6);
    color:#fff;
    opacity:0;
    transform:scale(0.8);
    transition:.25s ease;
    cursor:pointer;
}

/* Update for .icon class to support text like "SoundCloud", "Detailed", "Vimeo Video" */
.icon.left {
    width: auto !important;     /* Fixed width override kore text onujayi auto hobe */
    padding: 0 12px;           /* Dane o bame space debar jonno */
    font-size: 12px;           /* Text er size thik rakhar jonno */
    white-space: nowrap;       /* Lekha kete niche nambe na, ek line-e thakbe */
    left: 10px;
    height: 20px;
}

/* Right side icon-er jonno fixed square size thik rakhte */
.icon.right {
    width: 34px;
    height: 34px;
    right: 10px;
}

/* hover effect */
.portfolio-card:hover .card-overlay{
    background:rgba(0,0,0,0.25);
}

.portfolio-card:hover .icon{
    opacity:1;
    transform:scale(1);
}

.card-image img{
    width:100%;
    display:block;
    transition:.4s;
}

.portfolio-card:hover img{
    transform:scale(1.06);
}

.portfolio-card h3{
    margin-top:14px;
    color:#fff;
    font-size:18px;
    font-weight:700;
}

/* MOBILE */
@media(max-width:768px){

    .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .portfolio-tabs{
        gap:14px;
    }

}

/* MOBILE */
@media(max-width:480px){

    .portfolio-grid{
        grid-template-columns:1fr;
    }
}

.portfolio-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    display:none;
    z-index:9999;
}

.portfolio-modal.active{
    display:flex;
    align-items:center;
    justify-content:center;
}

.portfolio-card{
    cursor:pointer;
    transition:0.3s;
}

.portfolio-card.hide{
    display:none;
}

.modal-box{
    width:90%;
    height:90%;
    background:#111;
    display:flex;
    position:relative;
}

.modal-left{
    flex:2;
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-left img{
    max-width:90%;
    max-height:90%;
}

.modal-right{
    flex:1;
    padding:20px;
    color:#fff;
    background:#222;
}

#closeBtn{
    position:absolute;
    top:10px;
    right:10px;
    background:#333;
    color:#fff;
    border:none;
    padding:10px;
    cursor:pointer;
}

/* --- End of Portfolio --- */


.lm-info-block {
    position: relative;
    text-align: center;
    width: 100%;
    display: block;
    background-color: rgb(51, 51, 51);
    box-shadow: none;
    margin: 0px 0px 15px;
    padding: 20px 10px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(68, 68, 68);
    border-radius: 10px;
    border-image: initial;
    overflow: hidden;
    transition: 0.2s ease-in-out;
}
.lm-info-block i {
    position: relative;
    font-size: 33px;
    color: #5e2fd6;
    z-index: 1;
}
.lnr-map-marker:before {
    content: "\e833";
}
.lnr-phone-handset:before {
    content: "\e830";
}
.lm-info-block .lnr-envelope:before {
    content: "\e818";
}
.lnr-checkmark-circle:before {
    content: "\e87f";
}
.lm-info-block h4 {
    font-size: 15px;
    margin-top: 8px;
}

/* Contact Map Styling */
.map {
    width: 100%;
    height: 140px;
    margin: 0 0 35px;
}
.lmpixels-map iframe {
    height: 140px;
    max-width: 100%;
    width: 100%;
    margin: 0;
    line-height: 1;
    border: none;
}

/* Form Controls & Inputs */
.form-group {
  position: relative;
  margin: 0 0 21.5px;
}

.form-control,
.form-control:focus {
  height: 42px;
}

.form-control,
.form-control:focus,
.has-error .form-control,
.has-error .form-control:focus,
input[type="search"],
input[type="password"],
input[type="text"] {
  position: relative;
  border: 2px solid #555;
  border-radius: 5px;
  display: block;
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
  padding: 10px 25px 10px 12px;
  width: 100%;
  background-color: transparent;
  text-align: left;
  color: inherit;
  outline: none;
  font-family: 'Poppins', Helvetica, sans-serif;
  box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, .1);
}

textarea.form-control,
textarea.form-control:focus {
  height: auto;
}

/* Form Control Animated Border */
.form-control~.form-control-border {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  border-radius: 5px;
  top: 0;
  opacity: 0;
  background: transparent;
  border: 2px solid #5e2fd6;
  border-right-width: 0;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.form-control:focus~.form-control-border,
.form-group.form-group-focus .form-control-border {
  left: 0;
  right: 0;
  height: 100%;
  z-index: 1;
  opacity: 1;
  border-right-width: 2px;
}

.has-error .form-control~.form-control-border {
  border-color: #ff4c4c;
}

/* Placeholders */
.form-control::-moz-placeholder { color: #adadac; }
.form-control:-ms-input-placeholder { color: #adadac; }
.form-control::-webkit-input-placeholder { color: #adadac; }

/* Help Block Validation */
.form-group .help-block {
  position: absolute;
  display: inline-block;
  padding: 0px 5px;
  font-size: 0.93em;
  line-height: 1.75em;
  margin: -2px 0 0 10px;
  color: #fff;
  background: #ff4e4e;
}

.form-group .help-block:after {
  content: " ";
  position: absolute;
  left: 5px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #ff4e4e;
  border-right: 10px solid transparent;
}

.form-group .help-block:empty {
  display: none;
}

/* Form Icons */
.form-group-with-icon i {
  position: absolute;
  font-size: 16px;
  top: 13px;
  right: 13px;
  color: #d3d3d3;
}

.form-group-with-icon.form-group-focus i,
.form-group-with-icon .form-control:focus ~ i {
  color: #5e2fd6;
}

/* Labels */
.form-group label {
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: -1;
  color: #a5a6a7;
  transition: 0.3s;
}

.form-group .form-control:focus~label,
.form-group.form-group-focus .form-control~label {
  color: #5e2fd6;
  top: -20px;
  left: 0;
  z-index: 1;
  font-size: 13px;
}

/* Contact Form Two Columns Flex Layout */
.controls.two-columns .fields.clearfix {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.controls.two-columns .left-column {
  flex: 1;
  width: 50%;
}

.controls.two-columns .right-column {
  flex: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
}

/* Message Textarea Height Match */
.controls.two-columns .right-column .form-group,
.controls.two-columns .right-column textarea {
  height: 100% !important;
}

.controls.two-columns .right-column textarea {
  min-height: 188px; /* Bamer 3ti input er total height er sathe perfectly match korar jonno */
  resize: vertical;
}



/* Contact Submit Button Styling & Fix (Capture/Show Issue) */
.contact-form .button.btn-send,
.contact-form input[type="submit"] {
  display: inline-block;
  padding: 12px 30px;
  background: transparent;
  color: #fff !important;
  border: 2px solid #5e2fd6;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.1);
  font-family: 'Poppins', Helvetica, sans-serif;
  margin-top: 15px;
}

.contact-form .button.btn-send:hover,
.contact-form input[type="submit"]:hover {
  background: #5e2fd6;
  color: #fff !important;
  border-color: #5e2fd6;
  box-shadow: 0px 12px 15px -8px rgba(94, 47, 214, 0.4);
}

/* Fix for disabled class keeping button hidden or unclickable */
.contact-form .button.btn-send.disabled,
.contact-form input[type="submit"].disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* reCAPTCHA Styling Fix */
.g-recaptcha {
  margin: 15px 0;
  transform: scale(0.95);
  transform-origin: left center;
}

@media screen and (max-width: 480px) {
  .g-recaptcha {
    transform: scale(0.85); /* Choto mobile screen-e overflow prevent korar jonno */
  }
}
@media only screen and (min-width: 1025px) {
	/* FLOAT MENU */
	.float-menu{
		position:fixed;       /* absolute → fixed */
		right:25px;           /* screen এর right থেকে 20px দূরে */
		top:10%;              /* vertical center */
		z-index:20;
	}
	.float-menu ul{
		list-style:none;
		background: linear-gradient(#444444, #444444);
		padding:15px 0;
		border-radius:50px;
		width:80px;
		text-align:center;
	}

.float-menu li{
    padding:2px 10px;
    cursor:pointer;
	color: #b5b6b7;
	position:relative;
}

.float-menu li a{
	color: #b5b6b7;
}
.float-menu li i{
	font-size: 30px;
}
.float-menu li.active a,
.float-menu li a:hover{
    color:#5e2fd6;
}

.lnr-home:before{ content:"\e800"; }
.lnr-user:before{ content:"\e82a"; }
.lnr-graduation-hat:before { content: "\e821"; }
.lnr-briefcase:before { content: "\e84c"; }
.lnr-book:before { content: "\e828"; }
.lnr-envelope:before{ content:"\e818"; }

.float-menu li span.link-text{
    position: absolute;
    width: auto;
    visibility: hidden;
    opacity: 0;
    color: #fff;
    padding: 2px 10px;
    background-color: #5e2fd6;
    white-space: nowrap;
    right: 0;
    top: -50%;
    margin-top: 50%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 0;
    box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, .22);
}

.float-menu li:hover span.link-text{
    right: 100%;
    visibility: visible;
    opacity: 1;
}
.right-panel{
    padding: 20px;
    overflow-y: auto; /* Content boro hole scroll bar anar ebong scroll korar jonno eta khubai dorkari */
}
}


[class^="lnr-"]:before,
[class*=" lnr-"]:before{
  font-family: "Linearicons-Free";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
}

.section-arrows{
    position:fixed;       /* screen-এ fixed */
    bottom:0;          /* distance from bottom */
    width: 60px;
    right: 45px;           /* distance from right */
    display:flex;
    flex-direction:column; /* vertical stacking */
    pointer-events:auto;
	margin-bottom: 10vh;
    z-index:10;
	background:#444444;
    border-radius:35px;
	padding: 13px;
}

.section-arrows .arrow-left,
.section-arrows .arrow-right{
    cursor:pointer;
    font-size:24px;
	color: #b5b6b7;
    padding:10px 15px;
    border-radius:50%;
    transition:0.3s;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lnr-chevron-right:before { content: "\e876"; }
.lnr-chevron-left:before { content: "\e875"; }

.section-arrows .arrow-left:hover,
.section-arrows .arrow-right:hover{
    color:#5e2fd6;
}

.site-title { display: none; }
/* Hamburger default */
.profile-toggle {
    display: none; /* desktop এ hide */
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 900;
    width: 48px;
    height: 48px;
	line-height: 46px;
    background-color: #5e2fd6;
    border-radius: 30px; /* circle */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

/* hamburger lines */
.profile-toggle span {
    display: block;
    height: 3px;
    width: 50%;
    background: #fff;
    border-radius: 5px;
    transition: .25s ease-in-out;
}

/* Mobile only */
@media only screen and (max-width: 768px) {
	.section { padding-left: 50px; }
}
@media only screen and (max-width: 1024px) {
	.right-panel-toggle {
		top: 105px;
	}
	.right-panel-toggle.active {
		right: 275px;
	}
    .right-panel {
        padding: 0;
        overflow-y: unset;
		right: -275px;
		width: 275px;
		padding-top: 55px;
	}
	.blog-sidebar {
		top: 0;
		right: -275px; /* ba active thakle 0 */
		width: 275px;
		height: 100%; /* 100% height thaka aboshokok */
		padding: 20px;
		overflow-y: auto; /* Content boro hole scrollbar show korbe */
		z-index: 99;
	}
    .site-title {
		display: flex;
        justify-content: space-between; /* left title, right toggle */
        align-items: center;
        padding: 10px 20px;
        background: #222;       /* কালো background */
        border-radius: 5px;    /* কোণ গোল */
        position: fixed;
        top: 10px;              /* screen top থেকে gap */
        left: 20px;              /* centered */
        z-index: 50;
        width: auto;            /* content অনুযায়ী width */
        min-width: 200px;       /* optional: minimum width */
    }

    .site-title a {
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        font-weight: 600;
    }
    .profile-toggle {
        display: flex;
    }
	.float-menu{
		margin-bottom: 20px;
	}
	.float-menu li a {
        display: block;
        color: #fff;
        padding: 12px 0;
        line-height: 21px;
        opacity: .7;
    }
	.float-menu li.active a {
        opacity: 1;
    }
	.float-menu .link-text {
        font-size: 16px;
        line-height: 21px;
		cursor: pointer;
    }
	.section-arrows {
		width: 48px;
		bottom: 10px;
		right: 10px;
		margin-bottom: 0;
		border: 2px solid #5e2fd6;
	    padding: 5px 0;
	}
}

/* Toggle active state */
.profile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.profile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.profile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* For screens <=1024px */
@media only screen and (max-width: 1024px) {
    .header {
    }
    .profile-card {
        position: fixed;
        background-color: #5e2fd6 !important;
        top: 0;
        right: -100%; /* hidden by default */
        width: 250px; /* adjust width */width: 100%;
        max-width: 330px;
        height: 100%;
        background: #222;
        padding: 20px;
        box-shadow: 2px 0 15px rgba(0,0,0,0.5);
        transition: 0.4s ease;
        z-index: 101;
        overflow-y: auto;
    }

    /* When active (slide in) */
    .profile-card.active {
        right: 0;
    }
	.page-wrapper {
		position: fixed;
		border-radius: 0;
	}
    .main-wrapper {
        padding-left: 0; /* remove desktop padding */
		padding: 0;
    }
	.page-wrapper {
    height: 100%;
    margin: 0 auto;}
	.content-area {
		border-radius: 0;
		width: 100%;
	}
}