/* CSS Variables for Theme Consistency */
:root {
    --primary-color: #f6483b;
    --secondary-color: #202020;
    --text-primary: #202020;
    --text-secondary: #717171;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*--------------------- Copyright (c) 2022 -----------------------
[Master Stylesheet]

Project: Portfolio Responsive HTML Template
Version: 1.0.6
Assigned to: ThemeForest
-------------------------------------------------------------------

[Table of contents]

1. Body
2. Typography css / a
3. Main Wrapper / .prt_main_wrapper
4. About css Start / .prt_about_wrapper
5. Contact Page css Start / .prt_contact_wrapper
6. Services css Start / .prt_services_wrapper
7. Portfolio css Start / .prt_portfolio_wrapper
8. Footer css Start / .prt_footer_wrapper
9. Responsive css Start / .prt_counter_box
-------------------------------------------------------------------*/
/*--------- Body Strat -------*/
body {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #717171;
	background-color:#ffffff;
	-webkit-font-smoothing: antialiased;
}
/*--------- Body End -------*/
/*---------- Typography Css Start -------*/
a {
	color: #717171;
	text-decoration: none;
	cursor:pointer;
}
a:hover, a:focus {
	color: #717171;
	text-decoration: none;
}
a:focus {
	outline: none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.1;
	color: #202020;
}
img {
	max-width: 100%;
}
input, textarea, select, button {
	outline: none;
	box-shadow:none;
}
input:focus, textarea:focus, select:focus, button:focus {
	outline: none;
	box-shadow:none;
}
/*---------- Preloader Css Start -------*/
#preloader {
	background-color: #ffffff;
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 2147483647;
	width: 100%;
	height: 100%;
}
#status {
    background-position: center center;
    background-repeat: no-repeat;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
#status img.loader-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/*---------- Heading Css Start -------*/
.prt_heading_wrapper{
	text-align:center;
}
.prt_heading{
	margin-bottom:50px;
    display: inline-block;
	position:relative;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_heading h1{
	font-size:40px;
	margin:0px;
	text-transform:uppercase;
	position:relative;
	width:auto;
	font-weight:500;
	padding-bottom:15px;
}
.prt_heading h1:after{
	content:"";
	position:absolute;
	background-color:#202020;
	width:100%;
	height:2px;
	top:100%;
	left:0;
}

/* Ensure H2 headers get the same line treatment as H1 (for SEO conversion) */
.prt_heading h2:after{
	content:"";
	position:absolute;
	background-color:#202020;
	width:100%;
	height:2px;
	top:100%;
	left:0;
}
.prt_heading p{
    text-align: right;
    width: 100%;
    text-transform: uppercase;
    background-color: #ffffff;
    margin: 0px;
    padding-left: 10px;
    position: absolute;
    right: 0;
    bottom: -25px;
	color:#f6483b;
    font-weight: 500;
    max-width: 100%;
    overflow: visible;
}
.prt_heading_wrapper_2{
	text-align:left;
}
.prt_heading_wrapper_2 .prt_heading{
	margin-bottom:30px;
}
/*---------- Button css End -------*/
.prt_btn{
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    border-radius: 0px;
    padding: 0 20px;
	min-width:140px;
    outline: none;
    cursor: pointer;
    display: inline-block;
	text-align:center;
	text-transform:capitalize;
	background-color:#f6483b;
	border:1px solid #f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_btn:hover, .prt_btn:focus{
    color: #f6483b;
    background-color: #ffffff;
	border:1px solid #f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
/*---------- Typography css End -------*/
/*---------- Main Wrapper css Start -------*/
.prt_main_wrapper{
	position:relative;
	overflow-x:hidden;
}
.prt_main_wrapper::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #666666;
}
.prt_main_wrapper::-webkit-scrollbar{
	width: 0.1px;
	background-color: #F5F5F5;
}
.prt_main_wrapper::-webkit-scrollbar-thumb{
	background-color: #000000;
}
.prt_home_wrapper{
	background-color: #000000;
	background-image:url(../images/kontext4.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow-y:auto;
    padding: 200px 0px;
}

/* WebP support class for JavaScript detection */
.webp .prt_home_wrapper {
	background-image:url(../images/kontext4.webp);
}
.prt_home_wrapper h1{
	position:absolute;
	top:50%;
	font-size:150px;
	color: #ffffff;
	font-weight:bold;
	background: url(../images/samer-profile.png) no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    background-size: cover;
}
/* Navigation Logo - Commented Out for Cleaner View
.prt_logo_wrapper{
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: none;
}

body.section-active .prt_logo_wrapper {
    display: block;
}
.prt_logo_wrapper img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.section-active .prt_logo_wrapper img {
  -webkit-animation: rotate 2s linear infinite;
  -moz-animation: rotate 2s linear infinite;
  -o-animation: rotate 2s linear infinite;
  -ms-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}
*/ 
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotatey(360deg);
  }
}
@-moz-keyframes rotate {
  100% {
    -moz-transform: rotatey(360deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotatey(360deg);
  }
}
.prt_close_wrapper img{
    position: fixed;
    right: 50px;
    top: 50px;
	cursor:pointer;
	z-index: 2;
}
.prt_menu_wrapper{
	text-align:center;
}
.prt_menu_wrapper a{
	position:absolute;
	text-transform:uppercase;
	color:#ffffff;
	font-size:18px;
	margin:0px auto;
	z-index:3;
	font-weight:500;
	letter-spacing:5px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
/* Subtle transparent backdrop for menu visibility - only on hero page */
body:not(.section-active) .prt_menu_wrapper a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% + 40px);
	height: calc(100% + 20px);
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 50px;
	z-index: -1;
	transition: all 0.3s ease;
}
body:not(.section-active) .prt_menu_wrapper a:hover::before {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	width: calc(100% + 50px);
	height: calc(100% + 30px);
}

/* Mobile fix: Clean design with proper touch targets */
@media (max-width: 768px) {
	/* Remove all background effects for clean design */
	body:not(.section-active) .prt_menu_wrapper a::before {
		display: none !important;
	}
	body:not(.section-active) .prt_menu_wrapper a:hover::before {
		display: none !important;
	}
	
	/* Fix #2: Improve touch targets for mobile accessibility */
	.prt_menu_wrapper a {
		padding: 15px 20px;
		min-width: 120px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* Better text readability on mobile */
		font-weight: bold;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
		letter-spacing: 1px;
	}
}

/* Fix #4: Hero Background Image Mobile Position - Dynamic Full Screen Fit with Button Visibility */
@media (max-width: 768px) {
    .prt_home_wrapper {
        background-position: center 40%;    /* Slightly higher to accommodate bottom button */
        background-size: cover;
        height: 100vh;                      /* Exact viewport height - no scroll needed */
        height: 100dvh;                     /* Dynamic viewport height for mobile browsers */
        min-height: -webkit-fill-available; /* iOS Safari fix */
        max-height: 100vh;                  /* Prevent overflow */
        overflow: hidden;                   /* Ensure no scroll bars */
        position: relative;
        padding-bottom: 60px;               /* Reserve space for bottom button */
        box-sizing: border-box;
    }
}

/* Additional responsive adjustments for different mobile sizes */
@media (max-width: 480px) {
    .prt_home_wrapper {
        background-position: center 35%;    /* Even higher for smaller screens */
        padding-bottom: 50px;               /* Less padding on small screens */
    }
    
    .prt_menu_wrapper a.prt_bottom {
        bottom: 10px;                       /* Closer to bottom on small screens */
        font-size: 11px;                    /* Slightly smaller font */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* Tablet-like mobile devices - closer to desktop experience */
    .prt_home_wrapper {
        background-position: center 45%;    /* More centered for larger mobile */
        padding-bottom: 70px;
    }
}

/* Fix #5: Mobile tap feedback for touch devices */
@media (max-width: 768px) {
    .prt_menu_wrapper a:active {
        opacity: 0.7;
        transform: scale(0.95);
        transition: all 0.1s ease;
    }
}

/* Hide navigation logo completely on mobile devices (loader and hero remain unaffected) */
/* Mobile Logo Rule - Commented Out Since Navigation Logo is Disabled
@media (max-width: 768px) {
    body.section-active .prt_logo_wrapper {
        display: none !important;
    }
}
*/

/* Fix #5: Desktop-only hover effects for mouse interaction */
@media (min-width: 769px) {
    .prt_menu_wrapper a:hover {
        -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
        -moz-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
        -ms-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
        -o-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
        -webkit-mask-size: 200%;
        -moz-mask-size: 200%;
        -ms-mask-size: 200%;
        -o-mask-size: 200%;
        -webkit-animation: shine 1.3s infinite;
        -moz-animation: shine 1.3s infinite;
        -o-animation: shine 1.3s infinite;
        -ms-animation: shine 1.3s infinite;
        animation: shine 1.3s infinite;
    }
}

/* ABOUT PAGE MOBILE FIXES */

/* About Fix #1: Close Button Touch Target - Restore original design, just mobile positioning */
@media (max-width: 768px) {
    .prt_close_wrapper img {
        width: auto;
        height: auto;
        right: 20px;
        top: 20px;
        padding: 10px;
        cursor: pointer;
        /* Removed circular background - back to original simple black arrow */
    }
}

/* UNIVERSAL HEADING FIX: Fix mobile heading layout for all pages */
@media (max-width: 768px) {
    /* Fix the core issue: Remove absolute positioning on mobile for all headings */
    .prt_heading p {
        position: static !important;    /* Override absolute positioning */
        text-align: center !important; /* Consistent center alignment on mobile */
        right: auto !important;        /* Reset right positioning */
        bottom: auto !important;       /* Reset bottom positioning */
        width: 100% !important;        /* Full width on mobile */
        margin-top: 10px !important;   /* Proper spacing from h1 */
        margin-bottom: 20px !important;
        padding-left: 0 !important;    /* Remove desktop padding */
    }
    
    /* Ensure proper spacing for h1 on all heading types */
    .prt_heading h1 {
        margin-bottom: 0 !important;   /* No bottom margin since p has top margin */
    }
    
    /* Specific fixes for left-aligned headers (About ME, Certifications) */
    .prt_heading_wrapper_2 .prt_heading h1 {
        margin-top: 60px !important;   /* Extra space from container top */
    }
}

/* About Fix #3: Education/Experience Timeline Text Spacing - Better mobile readability */
@media (max-width: 480px) {
    .prt_education_box,
    .prt_experience_box {
        padding: 20px 15px;
    }
    .prt_education_box h4,
    .prt_experience_box h4 {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    .prt_education_box .prt_edu_year,
    .prt_experience_box .prt_edu_year {
        font-size: 13px;
    }
    .prt_education_box p,
    .prt_experience_box p {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* About Fix #5: Footer Social Icons - Ensure proper visibility and touch targets */
.prt_footer_social li a,
.prt_footer ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 18px;
    text-decoration: none;
    border-radius: 50%;
    background-color: rgba(246, 72, 59, 0.1);
    color: #f6483b;
    transition: all 0.3s ease;
}

.prt_footer_social li a:hover,
.prt_footer ul li a:hover {
    background-color: #f6483b;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .prt_footer_social,
    .prt_footer ul {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .prt_footer_social li,
    .prt_footer ul li {
        margin: 0 5px;
    }
    .prt_footer_social li a,
    .prt_footer ul li a {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}
@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}
.prt_menu_wrapper a.prt_top{
	top:45px;
	left:0px;
	right:0px;
	width:100px;
	text-align: center;
}
.prt_menu_wrapper a.prt_bottom{
	bottom:45px;
	left:0px;
	right:0px;
	width:150px;
	text-align: center;
}
.prt_menu_wrapper a.prt_left{
	top:50%;
	left:-15px;
	transform: rotateZ(-90deg) translateY(-50%);
	transform-origin: center center;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 30px;
	line-height: 30px;
}
/* Adjust backdrop for rotated left button - Fixed orientation and disabled */
body:not(.section-active) .prt_menu_wrapper a.prt_left::before {
	/* Fixed horizontal orientation: */
	/* transform: translate(-50%, -50%); */
	/* Disabled - no transparent background for AI Lab button */
	display: none;
}
.prt_menu_wrapper a.prt_right{
	top:50%;
	right:0px;
	transform: rotateZ(90deg) translateY(-50%);
	transform-origin: center center;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 30px;
	line-height: 30px;
}
/* Adjust backdrop for rotated right button - Fixed orientation and disabled */
body:not(.section-active) .prt_menu_wrapper a.prt_right::before {
	/* Fixed horizontal orientation: */
	/* transform: translate(-50%, -50%); */
	/* Disabled - no transparent background for Contact button */
	display: none;
}
/* Explicitly hide backdrop effects when any section is active */
body.section-active .prt_menu_wrapper a::before {
	display: none !important;
}
/* Hide the menu wrapper entirely when sections are active */
body.section-active .prt_menu_wrapper {
	display: none !important;
}
/* New Professional Sections Styling */

/* Common Section Styles */
.section-header {
	margin-bottom: 60px;
}
.section-title {
	font-size: 36px;
	font-weight: 600;
	color: #333;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.section-subtitle {
	font-size: 16px;
	color: #666;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Impact Metrics Section */
.impact-metrics-section {
	padding: 80px 0;
	background: #ffffff;
}

/* CSS Grid implementation for equal card heights - only target the cards row */
.impact-metrics-section .row:last-child {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin: 0;
}

/* Override Bootstrap column behavior only for the metric cards row */
.impact-metrics-section .row:last-child > [class*="col-"] {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
}

.metric-card {
	text-align: center;
	padding: 40px 20px;
	background: #f8f9fa;
	border-radius: 10px;
	box-shadow: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #e9ecef;
	/* Use flexbox within each card for content alignment */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%; /* This ensures the card fills the grid cell completely */
}
.metric-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.metric-icon {
	background: #202020;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}
.metric-icon i {
	font-size: 30px;
	color: white;
}
.metric-value {
	font-size: 36px;
	font-weight: 700;
	color: #333;
	margin-bottom: 10px;
}
.metric-label {
	font-size: 14px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Impact Metrics Responsive Grid */
@media (max-width: 991px) {
	.impact-metrics-section .row:last-child {
		grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
	}
}

@media (max-width: 575px) {
	.impact-metrics-section .row:last-child {
		grid-template-columns: 1fr; /* 1 column on mobile */
		gap: 20px;
	}
	.metric-card {
		padding: 30px 15px; /* Reduce padding on mobile */
	}
	
	.metric-value {
		font-size: 30px; /* Slightly smaller value text on mobile */
	}
	
	.metric-label {
		font-size: 13px; /* Slightly smaller label text on mobile */
	}
}

/* Core Competencies Section */
.core-competencies-section {
	padding: 80px 0;
	background: white;
}
.competency-item {
	margin-bottom: 35px;
}
.competency-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}
.competency-name {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}
.competency-percentage {
	font-size: 14px;
	font-weight: 600;
	color: #f6483b;
}
.competency-bar {
	height: 10px;
	background: #e9ecef;
	border-radius: 5px;
	overflow: hidden;
}
.competency-progress {
	height: 100%;
	background: linear-gradient(90deg, #f6483b, #ff6b5b);
	border-radius: 5px;
	width: 0;
	transition: width 1.5s ease-in-out;
}

/* Personal Values Section */
.personal-values-section {
	padding: 80px 0;
	background: #ffffff;
}
.value-card {
	background: #f8f9fa;
	padding: 30px 20px;
	border-radius: 10px;
	text-align: center;
	margin-bottom: 30px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: none;
	border: 1px solid #e9ecef;
	position: relative;
	overflow: hidden;
	height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.value-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.value-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	transition: height 0.3s ease;
}
.value-card:hover::before {
	height: 100%;
	opacity: 0.1;
}
.value-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 25px;
	flex-shrink: 0;
}
.value-icon i {
	font-size: 28px;
	color: white;
}
.value-card h4 {
	font-size: 18px;
	font-weight: 600;
	margin: 15px 0;
	color: #333;
}
.value-card p {
	font-size: 13px;
	line-height: 1.5;
	color: #666;
	margin: 0;
	padding: 0 10px;
	text-align: center;
}

/* Value Card Color Themes - Only 2 Colors with Core Competencies orange */
.value-orange .value-icon, .value-orange::before { background-color: #f6483b; }
.value-blue .value-icon, .value-blue::before { background-color: #202020; }
.value-green .value-icon, .value-green::before { background-color: #f6483b; }
.value-red .value-icon, .value-red::before { background-color: #202020; }
.value-purple .value-icon, .value-purple::before { background-color: #f6483b; }
.value-teal .value-icon, .value-teal::before { background-color: #202020; }
.value-yellow .value-icon, .value-yellow::before { background-color: #f6483b; }
.value-cyan .value-icon, .value-cyan::before { background-color: #202020; }

/* Executive Value Proposition Section */
.executive-value-section {
	padding: 80px 0;
	background: white;
}

/* CSS Grid for Executive Value Proposition card rows */
.executive-value-section .row:nth-child(2),
.executive-value-section .row:nth-child(3) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0 0 30px 0;
}

.executive-value-section .row:nth-child(3) {
	margin-bottom: 0;
}

/* Override Bootstrap column behavior for card rows */
.executive-value-section .row:nth-child(2) > [class*="col-"],
.executive-value-section .row:nth-child(3) > [class*="col-"] {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
}
.proposition-card {
	background: #f8f9fa;
	padding: 40px 30px;
	border-radius: 15px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #e9ecef;
	/* Flexbox for consistent content alignment */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
}

/* Executive Value Proposition Responsive Grid */
@media (max-width: 991px) {
	.executive-value-section .row:nth-child(2),
	.executive-value-section .row:nth-child(3) {
		grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
	}
}

@media (max-width: 575px) {
	.executive-value-section .row:nth-child(2),
	.executive-value-section .row:nth-child(3) {
		grid-template-columns: 1fr; /* 1 column on mobile */
		gap: 20px;
	}
	
	.proposition-card {
		padding: 30px 20px; /* Reduce padding on mobile */
	}
}
.proposition-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.1);
	background: white;
}
.proposition-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 25px;
	flex-shrink: 0;
}
.proposition-icon i {
	font-size: 30px;
	color: white;
}
.proposition-card h4 {
	font-size: 20px;
	font-weight: 600;
	margin: 15px 0;
	color: #333;
}
.proposition-card p {
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	margin: 0;
	padding: 0 10px;
	text-align: center;
}

/* Proposition Icon Colors - Only 2 Colors with Core Competencies orange */
.proposition-cyan { background-color: #202020; }
.proposition-orange { background-color: #f6483b; }
.proposition-teal { background-color: #202020; }
.proposition-red { background-color: #f6483b; }
.proposition-indigo { background-color: #202020; }
.proposition-pink { background-color: #f6483b; }

/* Hide original template sections we're not using */
.prt_couter_wrapper,
.prt_skills_wrapper {
	display: none !important;
}

/*---------- About css Start -------*/
.prt_about_wrapper{
    background-color: #ffffff;
    position: absolute;
    width: 100%;
	top:-100%;
    z-index: 1;
    display: none;
}
.prt_about_edulearn_wrapper.prt_bottompadder115 {
    padding: 0px 0px 70px 0px;
}
.prt_about_info{
	display:inline-block;
	width:100%;
    padding: 80px 0px 0px;
}
.prt_about_img{
	display:inline-block;
	width:100%;
	text-align:center;
}
.prt_about_img img{
	display:inline-block;
	max-width: 370px;
	max-height: 488px;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
}
.prt_about_details{
	display:inline-block;
	width:100%;
}
.prt_about_details p{
	margin-bottom:30px;
}
.prt_about_details a.prt_btn{
	margin-right:20px;
	margin-bottom:10px;
}
.prt_about_edulearn_wrapper{
	display:inline-block;
	width:100%;
}
.prt_about_learnsection{
	display:inline-block;
	width:100%;
	position:relative;
    z-index: 1;
}
.prt_about_learnsection:after{
    content: "";
    position: absolute;
    background-color: #202020;
    width: 2px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0px auto;
    z-index: -1;
}
.prt_about_learnbox_right{
    display: table;
    width: 100%;
	margin-bottom:30px;
	position:relative;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_right:after{
    content: "";
    position: absolute;
    background-color: #000000;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    border: 3px solid #ffffff;
    top: 50%;
    left: -22px;
    margin-top: -7px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_right:hover:after{
	background-color: #ffffff;
    border: 3px solid #f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_left{
    display: table;
    width: 100%;
	margin-bottom:30px;
	text-align:right;
	position:relative;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_left:after{
    content: "";
    position: absolute;
    background-color: #000000;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    border: 3px solid #ffffff;
    top: 50%;
    right: -22px;
    margin-top: -7px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_left:hover:after{
	background-color: #ffffff;
    border: 3px solid #f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_right:hover .prt_about_learnbox_year h1,
.prt_about_learnbox_right:hover .prt_about_learnbox_year .timeline-year{
	color:#f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_left:hover .prt_about_learnbox_year h1,
.prt_about_learnbox_left:hover .prt_about_learnbox_year .timeline-year{
	color:#f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_left .prt_about_learnbox_year{
	float:right;
    padding-top: 30px;
}
.prt_about_learnbox_year{
    display: table-cell;
    width: 200px;
    vertical-align: middle;
}
.prt_about_learnbox_year h1,
.prt_about_learnbox_year .timeline-year{
	font-size:60px;
	margin:0px;
	color:#202020;
    font-weight: 500;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_learnbox_right:hover .prt_about_learnbox_year h1,
.prt_about_learnbox_right:hover .prt_about_learnbox_year .timeline-year{
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    -ms-animation-delay: 300ms;
    -o-animation-delay: 300ms;
    animation-delay: 300ms;
    animation-iteration-count: infinite;
    animation-name: pulse;
}
.prt_about_learnbox_left:hover .prt_about_learnbox_year h1,
.prt_about_learnbox_left:hover .prt_about_learnbox_year .timeline-year{
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    -ms-animation-delay: 300ms;
    -o-animation-delay: 300ms;
    animation-delay: 300ms;
    animation-iteration-count: infinite;
    animation-name: pulse;
}
.prt_about_learnbox_left .prt_about_learnbox_info{
	float:left;
}
.prt_about_learnbox_info{
    display: table-cell;
    width: calc(100% - 200px);
}
.prt_about_learnbox_info h4{
	font-size:18px;
	text-transform:capitalize;
	margin-top:0px;
}
.prt_about_learnbox_info span{
	display:inline-block;
	width:100%;
	color:#ffffff;
	text-transform:capitalize;
	margin-bottom:10px;
}
.prt_about_learnbox_info p{
	margin:0px;
}
.prt_about_experience_wrapper{
	display:inline-block;
	width:100%;
    padding: 80px 0 0;
}
.prt_about_experience{
	display:inline-block;
	width:100%;
}
.prt_about_experiencebox{
	display: table;
    width: 100%;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
    padding: 50px 10px 50px 0px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_experiencebox:after{
    content: "";
    position: absolute;
    background-color: #f5f5f5;
    top: 0;
    right: 0;
    bottom: 0;
    width: 69%;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_experiencebox:hover:after{
	background-color:rgba(255, 255, 255, 0.2);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_experiencebox:hover .prt_about_experience_year h1,
.prt_about_experiencebox:hover .prt_about_experience_year .timeline-year{
	color:#f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_experience_year{
    display: table-cell;
    width: 230px;
    vertical-align: middle;
}
.prt_about_experience_year h1,
.prt_about_experience_year .timeline-year{
	font-size:100px;
	margin:0px;
	color:#202020;
    font-weight: 500;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_about_experience_year h4{
	font-size:18px;
	text-transform:capitalize;
	margin:0px;
	text-align:right;
	color:#717171;
}
.prt_about_experience_info{
    display: table-cell;
    width: calc(100% - 230px);
	padding-left:30px;
}
.prt_about_experience_info h4{
	font-size:18px;
	text-transform:capitalize;
	margin-top:0px;
}
.prt_about_experience_info span{
	display:inline-block;
	width:100%;
	color:#202020;
	text-transform:capitalize;
	margin-bottom:10px;
}
.prt_about_experience_info p{
	margin:0px;
}
.prt_profile_info{
	display:inline-block;
	width:100%;
    padding: 30px 0 70px;
}
.prt_profile_slider{
    display: inline-block;
    width: 100%;
    padding-top: 30px;
	text-align:center;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_profile_slider .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 20px;
}
.prt_profile_slider .owl-dots {
    text-align: center;
    margin-top: 15px;
}
.prt_profile_slider .owl-dot {
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
}
.prt_profile_slider .owl-dot span {
    width: 6px;
    height: 6px;
    background: rgba(32, 32, 32, 0.2);
    border-radius: 50%;
    display: block;
    transition: all 0.2s ease;
}
.prt_profile_slider .owl-dot.active span {
    background: rgba(246, 72, 59, 0.8);
    width: 8px;
    height: 8px;
}
.prt_profile_slider i{
	display: inline-block;
    width: 100%;
    font-size: 76px;
	color:#202020;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_profile_slider .item:hover i.pl_clr1{
	color: #1b73ff;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_profile_slider .item:hover i.pl_clr2{
    color: #c82663;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_profile_slider .item:hover i.pl_clr3{
    color: #76c239;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_profile_slider h4{
	display:inline-block;
	width:100%;
	margin-bottom:0px;
    color: #202020;
    margin-top: 20px;
	text-transform:capitalize;
}
.prt_profile_details{
	display:inline-block;
	width:100%;
}
.prt_profile_details p{
	margin-bottom:0px;
}
/*---------- Contact Page css Start -------*/
.prt_contact_wrapper {
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 100%;
    width: 100%;
    top: 0px;
    z-index: 1;
    display: none;
    padding: 80px 0px 0;
}
.prt_contact_box{
	
}
.prt_contact_info{
	display:inline-block;
	margin-bottom:50px;
	width:100%;
}
.prt_contact_info h1{
	font-size:30px;
	display:inline-block;
	margin:0px 0px 35px 0px;
	text-transform:uppercase;
}
.prt_contact_form{
	display:inline-block;
	width:100%;
}
.prt_contact_form input, .prt_contact_form textarea{
	width:100%;
	display:inline-block;
	margin-bottom:30px;
	border:0px;
	background-color:#f5f5f5;
	padding:0px 15px;
	height:50px;
	line-height:50px;
	color:#202020;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_contact_form input:hover, .prt_contact_form input:focus, .prt_contact_form textarea:hover, .prt_contact_form textarea:focus{
	background-color:#e1e1e1;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_contact_form textarea{
	height:auto;
	resize:vertical;
}
.prt_contact_form .prt_btn{
	margin-top:0px;
}
.prt_contact_map{
	display:inline-block;
	width:100%;
	margin-bottom:50px;
}
.prt_contact_map iframe{
	display:inline-block;
	width:100%;
	height:513px;
	border:0px;
}
.prt_contact_details {
    display: inline-block;
    width: 100%;
    padding: 0px 0px 80px;
}
.prt_contact_details_box{
	padding:80px 0px;
	text-align:center;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	z-index:1;
	margin-top:50px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_contact_details_box:hover{
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
	-webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
.prt_contact_details_box:after{
	content:"";
	position:absolute;
	background-color:rgba(0, 0, 0, 0.85);
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	z-index:-1;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_contact_details_box:hover:after{
	background-color:rgba(0, 0, 0, 0.75);
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_contact_details_box h4{
	font-size:18px;
	margin-top:0px;
	margin-bottom:20px;
	text-transform:capitalize;
    color: #ffffff;
}
.prt_contact_details_box p{
	margin:0px;
}
.prt_contact_details_box p a{
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_contact_details_box p a:hover{
	color:#f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_contact_details_box.details_box1{
	background-image:url(https://dummyimage.com/400x267);
}
.prt_contact_details_box.details_box2{
	background-image:url(https://dummyimage.com/400x267);
}
.prt_contact_details_box.details_box3{
	background-image:url(https://dummyimage.com/400x267);
}
/*---------- Services css Start -------*/
.prt_services_wrapper{
    background-color: #ffffff;
    position: absolute;
    width: 100%;
    top: 100%;
    z-index: 1;
    display: none;
}
.prt_services_slider_wrapper {
    display: inline-block;
    width: 100%;
    padding: 80px 0px 80px;
}
.prt_services_slider_imgs{
    display: inline-block;
    width: 100%;
	text-align:center;
	position:relative;
	z-index:1;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_services_slider_imgs img.img_1, .prt_services_slider_imgs img.img_2, .prt_services_slider_imgs img.img_3, .prt_services_slider_imgs img.img_4{
	position: absolute;
    left: 0;
    top: 0;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_services_slider_imgs .img_2 {
	z-index: 3;
    -webkit-transform: translateX(-44px) scale(0.9);
    -moz-transform: translateX(-44px) scale(0.9);
    -ms-transform: translateX(-44px) scale(0.9);
    -o-transform: translateX(-44px) scale(0.9);
	transform: translateX(-44px) scale(0.9);
		-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_services_slider_imgs .img_3 {
	z-index: 2;
    -webkit-transform: translateX(-85px) scale(0.8);
    -moz-transform: translateX(-85px) scale(0.8);
    -ms-transform: translateX(-85px) scale(0.8);
    -o-transform: translateX(-85px) scale(0.8);
    transform: translateX(-85px) scale(0.8);
		-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_services_slider_imgs .img_4 {
	z-index: 1;
    -webkit-transform: translateX(-125px) scale(0.7);
    -moz-transform: translateX(-125px) scale(0.7);
    -ms-transform: translateX(-125px) scale(0.7);
    -o-transform: translateX(-125px) scale(0.7);
    transform: translateX(-125px) scale(0.7);
		-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_services_slider_imgs img.active {
    -webkit-transform: translateX(0) scale(1);
    -moz-transform: translateX(0) scale(1);
    -ms-transform: translateX(0) scale(1);
    -o-transform: translateX(0) scale(1);
	transform: translateX(0) scale(1);
    z-index: 4;
	-webkit-animation:fadeIn 0.5s;
	-moz-animation:fadeIn 0.5s;
	-ms-animation:fadeIn 0.5s;
	-o-animation:fadeIn 0.5s;
	animation:fadeIn 0.5s;
}
.prt_services_slider_box{
	display:inline-block;
	width:100%;
}
.prt_services_slider_text{

	text-align:center;
	overflow:hidden;
	margin-bottom:30px;
	cursor:pointer;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.prt_services_slider_text img{
	display:inline-block;
	width:60px;
	height:70px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_services_slider_text h4{
	text-transform:capitalize;
	font-size:18px;
	margin-bottom:0px;
	margin-top:20px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.prt_services_slider_text p{
	margin-bottom:0px;
	margin-top:20px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_couter_wrapper{
    display: inline-block;
    width: 100%;
	background-image:url(../images/content/counter_bg.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
    position: relative;
    z-index: 1;
    padding: 80px 0px;
}
.prt_couter_wrapper:after {
    content: "";
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85);
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_counter_box{
    display: inline-block;
    width: 100%;
	text-align:left;
	padding-left:100px;
	margin-bottom:30px;
}
.prt_counter_box h3{
    font-size: 40px;
    margin: 0px;
    font-weight: 500;
    margin-top: -90px;
    margin-left: 80px;
	color: #ffffff;
}
.prt_counter_box p{
    font-size: 18px;
    margin-left: 80px;
    color: #f6483b;
}
.circles-text {
	font-size: 36px !important;
	color:#202020;
	font-weight:500;
}
#canvas{
	display:inline-block;
	width:100%;
}
#canvas .circle {
	display: inline-block;
	margin: 1em;
	width: 200px;
	height: 200px;
}
#canvas h5{
	font-size:18px;
	text-align:center;
}
#circles-1{
	background-image:url(https://dummyimage.com/169x165);
	border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#circles-2{
	background-image:url(https://dummyimage.com/169x165);
	border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#circles-3{
	background-image:url(https://dummyimage.com/169x165);
	border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#circles-4{
	background-image:url(https://dummyimage.com/169x165);
	border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.circles-decimals {
	font-size: .4em;
}
.prt_skills_wrapper{
    display: inline-block;
    width: 100%;
    padding: 80px 0px;
}
.prt_skills_bars{
    display: inline-block;
    width: 100%;
}
.prt_client_slider_wrapper {
    display: inline-block;
    width: 100%;
    padding: 0px 0px 80px;
}
.prt_client_slider{
    display: inline-block;
    width: 100%;
	text-align:center;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_client_slider .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 20px;
}
.prt_client_slider .owl-carousel .owl-item img{
	width:auto !important;
    display: inline-block;
	opacity:0.4;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_client_slider .owl-carousel .owl-item img:hover{
	opacity:1;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
button.prt_btn.prt-btn-lodmore {
    margin: 0px 0px 80px;
}
/*---------- Portfolio css Start -------*/
.prt_portfolio_wrapper{
    background-color: #ffffff;
    position: absolute;
    right: 100%;
    width: 100%;
    top: 0;
    z-index: 1;
    display: none;
    padding: 80px 0px 0px;
}
.prt_loadmore{
	display:none;
}
.prt_portfolio_box{
	display:inline-block;
	width:100%;
}
.prt_portfolio_box a{
	display:inline-block;
	width:100%;
	margin-bottom:30px;
	text-align:center;
}
.prt_portfolio_img{
	display:inline-block;
	width:auto;
	text-align:center;
	position:relative;
	overflow:hidden;
	z-index:1;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_portfolio_img:after{
	content:"";
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	background-color:rgba(255, 255, 255, 0.5);
	z-index:0;
	opacity:0;
	visibility:hidden;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_portfolio_img:hover:after{
	opacity:1;
	visibility:visible;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_portfolio_img img{
	display:inline-block;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_portfolio_img:hover img{
	display:inline-block;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_portfolio_img:hover .prt_portfolio_text{
	bottom:0;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_portfolio_text{
	position:absolute;
	bottom:-111px;
	left:0px;
	width:100%;
	text-align:left;
	padding:30px;
    z-index: 1;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_portfolio_text h4{
	font-size:18px;
	text-transform:uppercase;
	color:#000000;
	margin-top:0px;
}
.prt_portfolio_text p{
	margin:0px;
	text-transform:capitalize;
	color:#000000;
}
/*---------- Footer css Start -------*/
.prt_footer_wrapper{
	background-color:#f5f5f5;
    padding: 30px 0px;
}
.prt_footer_wrapper p{
    display: inline-block;
	width:auto;
	text-align:left;
	color:#202020;
	margin:0px;
    padding-top: 5px;
}
.prt_footer_wrapper p a{
	color:#f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_footer_wrapper p a:hover{
	color:#f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_footer_wrapper ul{
    float:right;
	width:auto;
	margin:0px;
	padding:0px;
}
.prt_footer_wrapper ul li{
	display:inline-block;
	width:auto;
	list-style:none;
	margin:0px 0px;
}
.prt_footer_wrapper ul li:last-child{
	margin-right:0px;
}
.prt_footer_wrapper ul li:first-child{
	margin-left:0px;
}
.prt_footer_wrapper ul li a{
	display:inline-block;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#1c1c1c;
	border-radius:100%;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.prt_footer_wrapper ul li a:hover{
	color:#ffffff;
	background-color:#f6483b;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
/*---------- Main Wrapper css End -------*/
/*---------- Responsive css Start -------*/
@media (min-width: 992px) and (max-width: 1199px) {
.prt_counter_box {
    padding-left: 50px;
}
.prt_home_wrapper h1 {
    font-size: 120px;
	margin:0px;
}
}
@media(max-width:991px){
    .prt_about_edulearn_wrapper.prtEducation {
        padding: 70px 0px 30px;
    }
    .prt_services_slider_wrapper {
     
        height: 1410px;
    }
    .row.row_service_space {
        margin: 430px 0px 0px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
.prt_profile_slider {
    padding-top: 0px;
    margin-bottom: 50px;
}
.prt_counter_box {
    padding-left: 0px;
}
.prt_about_learnbox_right:after {
    top: 0%;
    left: 0%;
    margin-top: 0
}
.prt_about_learnbox_left:after {
    top: 0%;
    right: 0%;
    margin-top: 0
}
.prt_about_learnsection:after{
	display:none;
}
.prt_about_learnbox_left, .prt_about_learnbox_right {
    border-bottom: 1px solid #202020;
    padding-bottom: 30px;
}
.prt_services_slider_imgs {
    margin-left: 150px;
}
.prt_services_slider_box {
    position: absolute;
    top: 450px;
    left: 0;
    right: 0;
    margin: 0px auto;
}
.prt_home_wrapper h1 {
    font-size: 90px;
	margin:0px;
}
}
@media (max-width: 767px) {
    .prt_services_slider_wrapper {
        height: 1420px;
    }
    .prt_counter_box {
        padding: 0 0 30px;
        text-align: center;
    }
    .prt_counter_box h3 {
        margin: 20px 0;
    }
    .prt_counter_box p{
        margin:0 ;
    }
.prt_home_wrapper h1 {
    font-size: 90px;
	margin:0px;
	text-align: center;
}
.prt_profile_slider {
    padding-top: 0px;
    margin-bottom: 50px;
}
.prt_about_learnbox_right:after {
    top: 0%;
    left: 0%;
    margin-top: 0
}
.prt_about_learnbox_left:after {
    top: 0%;
    right: 0%;
    margin-top: 0
}
.prt_about_learnsection:after{
	display:none;
}
.prt_about_learnbox_left, .prt_about_learnbox_right {
    border-bottom: 1px solid #202020;
    padding-bottom: 30px;
}
.prt_footer_wrapper p {
    width: 100%;
    text-align: center;
    margin: 0px 0px 20px 0px;
}
.prt_footer_wrapper ul {
    width: 100%;
    text-align: center;
}
.prt_services_slider_imgs {
    margin-left: 150px;
}
.prt_services_slider_box {
    position: absolute;
    top: 450px;
    left: 0;
    right: 0;
    margin: 0px auto;
}
}
@media (min-width: 620px) and (max-width: 700px) {
.prt_services_slider_imgs {
    margin-left: 120px;
}
}
@media(max-width:580px){
    .prt_services_slider_wrapper {
        height: 1490px;
    }
}
@media (min-width: 540px) and (max-width: 619px) {
.prt_services_slider_imgs {
    margin-left: 50px;
}
}
@media (max-width: 539px) {
.prt_services_slider_imgs {
    margin-left: 0px;
}
}
@media (max-width: 768px) {
    .row.row_service_space {
        margin: 360px 0px 0px;
    }
    .prt_services_slider_wrapper {
        height: 1400px;
    }
    .prt_couter_wrapper {
        padding: 50px 0 0;
    }
    .prt_about_edulearn_wrapper.prtEducation {
        padding: 30px 0px 10px;
    }

    .prt_about_experiencebox.leadUX {
        margin: 0;
    }

    .prt_profile_slider {
        margin-bottom: 30px;
    }
    .prt_profile_info {
        padding: 30px 0 40px;
    }

    button.prt_btn.prt-btn-lodmore {
        margin: 0px 0px 40px;
    }
    .prt_contact_details {
        padding: 0px 0px 50px;
    }
    .prt_contact_map {
        margin-bottom: 0;
    }

    .prt_contact_info {
        margin-bottom: 40px;
    }

    .prt_client_slider_wrapper {
        padding: 0px 0px 20px;
    }
    .prt_skills_wrapper {
        padding: 40px 0px 20px;
    }












    /* Mobile menu positioning - Perfect viewport fit with dynamic screen adaptation */
    .prt_menu_wrapper a.prt_top {
        top: 20px;                    /* Safe area from top edge */
        left: 0px;
        right: 0px;
        width: 80px;                  /* Optimized for mobile */
        text-align: center;
        font-size: 12px;
        letter-spacing: 1px;
        margin: 0 auto;               /* Center horizontally */
        position: fixed;              /* Floating above content */
        z-index: 10;                  /* Above other content */
    }
    .prt_menu_wrapper a.prt_bottom {
        bottom: calc(env(safe-area-inset-bottom) + 15px); /* Dynamic bottom with safe area */
        left: 0px;
        right: 0px;
        width: 100px;                 /* Optimized for mobile */
        text-align: center;
        font-size: 12px;
        letter-spacing: 1px;
        margin: 0 auto;               /* Center horizontally */
        position: fixed;              /* Ensure always visible */
        z-index: 10;                  /* Above other content */
    }
    .prt_menu_wrapper a.prt_left {
        top: 50%;                     /* Perfect vertical center */
        left: 5px;                    /* Safe margin from left edge */
        transform: rotateZ(-90deg) translateY(-50%);
        transform-origin: center center;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90px;                  /* Fit mobile screen */
        height: 26px;
        line-height: 26px;
        font-size: 11px;              /* Slightly smaller for better fit */
        letter-spacing: 1px;
        position: fixed;              /* Floating above content */
        z-index: 10;                  /* Above other content */
    }
    .prt_menu_wrapper a.prt_right {
        top: 50%;                     /* Perfect vertical center */
        right: 5px;                   /* Safe margin from right edge */
        transform: rotateZ(90deg) translateY(-50%);
        transform-origin: center center;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90px;                  /* Fit mobile screen */
        height: 26px;
        line-height: 26px;
        font-size: 11px;              /* Slightly smaller for better fit */
        letter-spacing: 1px;
        position: fixed;              /* Floating above content */
        z-index: 10;                  /* Above other content */
    }
.prt_services_slider_imgs {
    margin-left: 0px;
}
.prt_heading h1 {
    font-size: 34px;
}
.prt_home_wrapper h1 {
    font-size: 50px;
}
.prt_counter_box {
    padding-left: 0px;
}
.prt_about_learnbox_year {
    display: table-caption;
    width: 100%;
    vertical-align: middle;
	padding-top: 0px;
}
.prt_about_learnbox_info {
    width: 100%;
}
.prt_about_experience_year {
    display: inline-block;
    width: 100%;
}
.prt_about_experience_year h4 {
    margin-bottom: 50px;
    text-align: left;
}
.prt_about_experience_info {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
}
.prt_footer_wrapper ul li {
    margin: 0px 2px;
}
.prt_about_learnbox_right:after {
    display:none;
}
.prt_about_learnbox_left:after {
    display:none;
}
}
@media(max-width:420px){
    .row.row_service_space {
        margin: 320px 0px 0px;
    }
    .prt_services_slider_wrapper {
        height: 1350px;
    }
}
@media(max-width:380px){
    .row.row_service_space {
        margin: 280px 0px 0px;
    }
    .prt_services_slider_wrapper {
        height: 1310px;
    }
}

/* ===== TESTIMONIALS SECTION STYLES ===== */
.samer-testimonials-section {
    padding: 80px 0;
    background: #fff;
    position: relative;
}

.samer-testimonials-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.samer-testimonial-display {
    margin-bottom: 40px;
}

.samer-testimonial-content {
    background: #f9f9f9;
    padding: 40px 30px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.samer-testimonial-quote {
    margin-bottom: 25px;
}

.samer-testimonial-quote i {
    color: #f6483b;
    font-size: 30px;
    margin-bottom: 20px;
    display: block;
}

.samer-testimonial-quote p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    font-style: italic;
}

.samer-testimonial-author h3 {
    color: #202020;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.samer-testimonial-author h4 {
    color: #f6483b;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.samer-testimonials-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.samer-testimonials-arrows {
    display: flex;
    gap: 15px;
}

.samer-arrow-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #f6483b;
    background: transparent;
    color: #f6483b;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.samer-arrow-btn:hover {
    background: #f6483b;
    color: #fff;
}

.samer-arrow-btn:focus {
    outline: none;
}

/* Mobile Responsive */
@media(max-width: 768px) {
    .samer-testimonials-section {
        padding: 60px 0;
    }
    
    .samer-testimonial-content {
        padding: 30px 20px;
    }
    
    .samer-testimonial-quote p {
        font-size: 15px;
    }
    
    .samer-testimonials-nav {
        gap: 20px;
    }
    
    .samer-testimonials-dots {
        gap: 6px;
    }
    
    .samer-dot {
        width: 8px;
        height: 8px;
    }
}

/* ===== AI LAB PAGE STYLES ===== */

/* AI Business Value Section - Matching Strength Page Quality */
.samer-ai-value-section {
    padding: 80px 0;
    background: #fff;
    position: relative;
}

.samer-ai-value-content h2 {
    color: #2f2f2f;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

/* Add underline bar like Strength page */
.samer-ai-value-content h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #f6483b 0%, #ff6b5b 100%);
}

.samer-ai-value-content > p {
    color: #777;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    max-width: 900px;
    margin: 30px auto 60px auto;
    font-weight: 300;
    padding: 0 20px; /* Add padding for consistent margins */
}

/* AI Value Cards - Dynamic Height with Equal Heights via Grid */
.samer-ai-value-card {
    background: #f8f9fa;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%; /* Fill grid cell completely */
    margin: 0; /* Remove margin - let CSS Grid gap handle spacing */
    /* SURGICAL FIX: Content containment with proper text wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    box-sizing: border-box;
}

.samer-ai-value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(246, 72, 59, 0.15);
    background: #fff;
}

.samer-ai-value-card:hover .samer-ai-icon {
    background: #f6483b;
    transform: scale(1.1);
}

/* AI Icon - Matching Strength Page Icon Style */
.samer-ai-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #202020;
    color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    font-size: 35px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.samer-ai-icon i {
    display: block !important;
    color: #fff !important;
    line-height: 1;
}

.samer-ai-value-card h3 {
    color: #2f2f2f;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.samer-ai-value-card p {
    color: #777;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    font-weight: 300;
    /* SURGICAL FIX: Text wrapping without overflow restriction */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: block; /* Allow natural text flow */
}

/* YouTube Embed Section - Featured Video */
.youtube-embed-section {
    padding: 60px 0;
    background: #f8f8f8;
}

.samer-featured-video-section {
    padding: 60px 0;
    background: #f8f8f8;
}

.samer-featured-video-header {
    text-align: center;
    margin-bottom: 50px;
}

.samer-featured-video-header h2 {
    color: #2f2f2f;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.samer-featured-video-header h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #f6483b 0%, #ff6b5b 100%);
}

.samer-featured-video-header p {
    color: #777;
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 0;
    line-height: 1.6;
}

.youtube-embed-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-top: 3px solid #f6483b;
}

.youtube-embed-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Substack Feed Section - Articles Grid */
.substack-feed-section {
    padding: 80px 0;
    background: #fff;
}

.samer-articles-section {
    padding: 80px 0;
    background: #fff;
}

.samer-articles-header {
    text-align: center;
    margin-bottom: 60px;
}

.samer-articles-header h2 {
    color: #2f2f2f;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.samer-articles-header h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #f6483b 0%, #ff6b5b 100%);
}

.samer-articles-header p {
    color: #777;
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Article Cards - Uniform Height and Styling */
.substack-article-card {
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 30px;
    min-height: 400px;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
}

.substack-article-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(246, 72, 59, 0.15);
    background: #fff;
}

.substack-article-card .card-body {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.substack-article-card h3 {
    color: #2f2f2f;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.5;
    font-family: 'Roboto', sans-serif;
    min-height: 60px;
}

.substack-article-card h3 a {
    color: #2f2f2f;
    text-decoration: none;
    transition: color 0.3s ease;
}

.substack-article-card h3 a:hover {
    color: #f6483b;
}

.substack-article-card .article-meta {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.substack-article-card .article-excerpt {
    color: #777;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.substack-article-card .read-more {
    display: inline-block;
    color: #fff;
    background: #f6483b;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    align-self: flex-start;
}

.substack-article-card .read-more:hover {
    background: #202020;
    transform: translateX(5px);
}

.substack-article-card .read-more i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.substack-article-card .read-more:hover i {
    transform: translateX(3px);
}

/* Contact Info Cards - Matching Site Style */
.contact-info-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 40px rgba(246, 72, 59, 0.15) !important;
    background: #fff !important;
}

.contact-info-card:hover .contact-icon-wrapper {
    background: #f6483b !important;
    transform: scale(1.1);
}

/* CSS Grid for AI Value Cards - Dynamic Equal Heights with Proper Spacing */
.samer-ai-value-content .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 30px; /* 30px vertical, 30px horizontal */
    margin: 0;
}

/* Override Bootstrap column behavior for AI cards */
.samer-ai-value-content .row > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0; /* Remove any conflicting margins */
}

/* Responsive adjustments for AI Lab */
@media (max-width: 991px) {
    .samer-ai-value-section {
        padding: 50px 30px; /* Better tablet spacing */
    }
    
    .samer-ai-value-content .row {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 30px 25px; /* 30px vertical, 25px horizontal for tablet */
    }
    
    .samer-articles-section {
        padding: 50px 30px; /* Better tablet spacing for articles */
    }
    
    .substack-article-card {
        margin-bottom: 40px; /* Increased spacing to match AI cards */
    }
}

/* Section Headers - Template Style */
.samer-section-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.samer-section-header h2 {
    color: #2f2f2f;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Roboto', sans-serif;
    position: relative;
}

.samer-section-header h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #f6483b 0%, #ff6b5b 100%);
}

.samer-section-header p {
    color: #777;
    font-size: 18px;
    margin: 0;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Featured Video Section */
.samer-featured-video-section {
    padding: 80px 0;
    background: #fff;
    position: relative;
}

.samer-featured-video {
    max-width: 900px;
    margin: 0 auto;
    background: #000;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
}

.samer-video-placeholder {
    padding: 100px 20px;
    text-align: center;
    color: #fff;
}

.samer-video-placeholder i {
    font-size: 60px;
    margin-bottom: 20px;
    color: #f6483b;
}

.samer-video-placeholder p {
    font-size: 18px;
    margin: 0;
}

/* Recent Videos Section */
.samer-recent-videos-section {
    padding: 80px 0;
    background: #fff;
    position: relative;
}

.samer-playlist-note {
    background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%);
    border: 1px solid #eee;
    border-radius: 0;
    padding: 50px 40px;
    margin: 40px 0;
    text-align: center;
    position: relative;
}

.samer-playlist-note:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(246, 72, 59, 0.1);
    border-color: #f6483b;
    transition: all 0.4s ease;
}

.samer-video-card-placeholder {
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    border-radius: 0;
    padding: 50px 30px;
    text-align: center;
    margin-bottom: 30px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.samer-video-card-placeholder:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(246, 72, 59, 0.1);
    border-color: #f6483b;
}

.samer-placeholder-content i {
    font-size: 40px;
    color: #f6483b;
    margin-bottom: 15px;
    display: block;
}

.samer-placeholder-content p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* Articles Section */
.samer-articles-section {
    padding: 80px 0;
    background: #fff;
    position: relative;
}

.samer-article-card-placeholder {
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    border-radius: 0;
    padding: 40px 30px;
    margin-bottom: 30px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.4s ease;
}

.samer-article-card-placeholder:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(246, 72, 59, 0.1);
    border-color: #f6483b;
}

/* Video and Article Cards (for dynamic content) */
.samer-video-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.samer-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.samer-video-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.samer-video-info {
    padding: 20px;
}

.samer-video-title {
    color: #202020;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.samer-video-description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.samer-article-card {
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    border-radius: 0;
    padding: 40px 30px;
    margin-bottom: 30px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.samer-article-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(246, 72, 59, 0.1);
    border-color: #f6483b;
}

.samer-article-title {
    color: #2f2f2f;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.samer-article-excerpt {
    color: #777;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
    font-weight: 300;
    flex-grow: 1;
}

.samer-article-date {
    color: #f6483b;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Mobile Responsive - COMPREHENSIVE AI LAB FIXES */
@media(max-width: 768px) {
    .samer-ai-value-section,
    .samer-featured-video-section,
    .samer-recent-videos-section,
    .samer-articles-section {
        padding: 60px 0;
    }
    
    .samer-ai-value-content h2,
    .samer-section-header h2 {
        font-size: 28px;
        letter-spacing: 1px;
    }
    
    .samer-section-header {
        margin-bottom: 60px;
    }
    
    /* AI Advantage Cards - Mobile CSS Grid with Proper Spacing - MAXIMUM FORCE OVERRIDE */
    .samer-ai-value-section {
        padding: 40px 20px !important; /* Add side padding to section */
    }
    
    .samer-ai-value-content .row {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 1 column on mobile */
        gap: 30px 0 !important; /* 30px vertical, 0px horizontal for mobile */
        row-gap: 30px !important; /* Force row gap specifically */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Override Bootstrap column behavior and clear ALL margins */
    .samer-ai-value-content .row > [class*="col-"] {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important; 
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    
    .samer-ai-value-card {
        padding: 30px 20px !important;
        margin: 0 !important; /* Remove any conflicting margins */
        margin-bottom: 0 !important; /* Override any existing margin-bottom */
        margin-top: 0 !important; /* Clear top margins too */
        /* Mobile text wrapping */
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        box-sizing: border-box;
    }
    
    .samer-ai-icon {
        width: 60px; /* Optimized for mobile */
        height: 60px;
        font-size: 28px;
        margin-bottom: 15px;
    }
    
    /* FIX 1: YouTube Embed Responsiveness Enhancement */
    .samer-featured-video {
        margin: 0;
    }
    
    .youtube-embed-container {
        padding: 10px !important;
        margin: 0 !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }
    
    .samer-video-placeholder {
        padding: 60px 20px;
    }
    
    .samer-video-placeholder i {
        font-size: 40px;
    }
    
    /* FIX 2: Articles Section - Better mobile spacing and margins */
    .samer-articles-section {
        padding: 40px 20px; /* Add side padding to articles section */
    }
    
    /* Article Cards - Proper mobile stacking */
    .samer-article-card,
    .substack-article-card {
        padding: 30px 20px;
        height: auto !important; /* Auto height for content */
        min-height: 280px;
        margin-bottom: 30px; /* Increased spacing to match AI cards */
        width: 100%; /* Full width on mobile */
        margin-left: auto;
        margin-right: auto;
        max-width: 100%; /* Ensure proper containment */
    }
    
    .samer-article-title {
        font-size: 18px;
    }
    
    .samer-article-excerpt {
        font-size: 15px;
    }
}

/* Extra Small Screen Optimizations (320px - 375px) */
@media(max-width: 375px) {
    /* Optimize AI Value section for tiny screens */
    .samer-ai-value-section {
        padding: 30px 15px; /* Reduced side padding for smaller screens */
    }
    
    /* Optimize AI Value cards for tiny screens */
    .samer-ai-value-card {
        padding: 25px 15px !important;
        min-height: 250px;
        margin-bottom: 25px; /* Slightly reduced spacing for tiny screens */
    }
    
    .samer-ai-value-card h3 {
        font-size: 18px;
        min-height: auto;
    }
    
    .samer-ai-value-card p {
        font-size: 14px;
    }
    
    /* Optimize articles section for tiny screens */
    .samer-articles-section {
        padding: 30px 15px; /* Reduced side padding for smaller screens */
    }
    
    /* Optimize article cards for tiny screens */
    .samer-article-card,
    .substack-article-card {
        padding: 25px 15px !important;
        min-height: 250px;
        margin-bottom: 25px; /* Slightly reduced spacing for tiny screens */
    }
    
    .samer-article-title,
    .article-title {
        font-size: 16px !important;
    }
    
    .samer-article-excerpt,
    .article-excerpt {
        font-size: 14px !important;
    }
    
    /* Ensure section headers fit on small screens */
    .samer-ai-value-content h2,
    .samer-featured-video-header h2,
    .samer-articles-header h2 {
        font-size: 24px !important;
        padding: 0 10px;
    }
    
    .samer-ai-value-content > p,
    .samer-featured-video-header p,
    .samer-articles-header p {
        font-size: 14px !important;
        padding: 0 30px !important; /* Increased padding for better mobile margins */
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important; /* Remove max-width constraint on mobile */
    }
}

/* Video Overlay and Embed Styles */
.samer-featured-video-embed {
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
}

.samer-video-embed-placeholder {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
}

.samer-video-embed-placeholder:hover {
    transform: scale(1.02);
}

.samer-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 10;
}

.samer-video-embed-placeholder:hover .samer-play-overlay i {
    color: #f6483b !important;
    transform: scale(1.2);
    filter: drop-shadow(0 5px 15px rgba(246, 72, 59, 0.4));
}

.samer-featured-video-info {
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%) !important;
    border-top: 3px solid #f6483b;
}

.samer-featured-video-info h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: #2f2f2f !important;
    font-family: 'Roboto', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.samer-featured-video-info p {
    font-size: 16px !important;
    color: #777 !important;
    font-weight: 300;
    line-height: 1.7;
}

/* Additional Video Card Enhancements */
.samer-video-card .samer-video-thumbnail {
    transition: all 0.3s ease;
}

.samer-video-card:hover .samer-video-thumbnail {
    transform: scale(1.05);
}

/* Article Card Links */
.samer-article-card a:hover {
    color: #202020 !important;
    text-decoration: underline !important;
}

/* RSS Loading Skeleton Animation - Optimized for all devices */
.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
    -webkit-animation: loading 1.5s infinite; /* Safari mobile */
    will-change: background-position; /* GPU acceleration */
    transform: translateZ(0); /* Force GPU layer */
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@-webkit-keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Enhanced Button Hover Effects - Desktop & Mobile */
.prt_btn {
    transition: var(--transition-smooth, all 0.3s ease);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
    touch-action: manipulation; /* Optimize touch responsiveness */
}
.prt_btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none; /* Prevent interference with clicks */
}
/* Desktop hover */
.prt_btn:hover::before {
    width: 300px;
    height: 300px;
}
.prt_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(246,72,59,0.3);
}
/* Mobile touch states */
.prt_btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(246,72,59,0.2);
}
.prt_btn:active::before {
    width: 300px;
    height: 300px;
    transition: width 0.1s, height 0.1s;
}
/* Ensure effects work on touch devices */
@media (hover: none) and (pointer: coarse) {
    .prt_btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(246,72,59,0.3);
    }
}

/* Mobile Menu Enhancement */
@media (max-width: 768px) {
    .prt_menu_wrapper a {
        padding: 15px;
        transition: background 0.3s ease, transform 0.2s ease;
        position: relative;
    }
    .prt_menu_wrapper a:active {
        background: rgba(246,72,59,0.1);
        transform: scale(0.98);
    }
    /* Add touch feedback ripple */
    .prt_menu_wrapper a::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(246,72,59,0.2);
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
    }
    .prt_menu_wrapper a:active::after {
        width: 100px;
        height: 100px;
    }
}

/* Clean n8n Chat Widget - Minimal Intervention */
/* Let n8n handle its own rendering and positioning */

/* Prevent input focus zoom on iOS - exclude n8n chat elements */
@media (max-width: 768px) {
    input[type="text"]:not(.n8n-chat input):not([class*="n8n"]),
    input[type="email"]:not(.n8n-chat input):not([class*="n8n"]),
    textarea:not(.n8n-chat textarea):not([class*="n8n"]),
    select:not(.n8n-chat select):not([class*="n8n"]) {
        font-size: 16px !important; /* Prevents zoom on iOS */
        -webkit-text-size-adjust: 100%;
    }
}

/* Logo Enhancement - Subtle Animation */
.prt_logo {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.prt_logo:hover {
    transform: scale(1.05);
}
/* Logo animation on page load */
@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.prt_logo {
    animation: logoFadeIn 0.8s ease-out;
}

/* SEO Fix: Make H2 look identical to H1 in sections (preserves design while fixing SEO hierarchy) */
.prt_heading h2 {
    font-size: 40px;
    margin: 0px;
    text-transform: uppercase;
    position: relative;
    width: auto;
    font-weight: 500;
    color: #202020;
    padding-bottom: 15px;
}
.prt_heading h2:after {
    content: "";
    position: absolute;
    background-color: #202020;
    width: 100%;
    height: 2px;
    top: 100%;
    left: 0px;
}

/* H2 Subheader styling - matches H1 subheader behavior */
.prt_heading h2 + p {
    text-align: right;
    width: 100%;
    text-transform: uppercase;
    background-color: #ffffff;
    margin: 0px;
    padding-left: 10px;
    position: absolute;
    right: 0;
    bottom: -25px;
    color: #f6483b;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
}

/* Ensure About page H2 headers get the line element (override any left-align issues) */
.prt_heading_wrapper_2 .prt_heading h2:after {
    content: "";
    position: absolute;
    background-color: #202020;
    width: 100%;
    height: 2px;
    top: 100%;
    left: 0px;
}

/* Ensure ALL H2 headers get the line element - fix for Strength page and any others */
.prt_heading h2:after {
    content: "" !important;
    position: absolute !important;
    background-color: #202020 !important;
    width: 100% !important;
    height: 2px !important;
    top: 100% !important;
    left: 0px !important;
    z-index: 10 !important;
}

/* Add proper spacing to push subtitle below the line */
.prt_heading h2 + p {
    margin-top: 25px !important;
    padding-top: 5px !important;
}

/* Responsive H2 styling to match H1 */
@media (max-width: 991px) {
    .prt_heading h2 {
        font-size: 34px;
    }
    
    /* Mobile H2 subheader fixes - Consistent center alignment for all pages */
    .prt_heading h2 + p {
        position: static !important;
        text-align: center !important;  /* Consistent center alignment on mobile */
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        padding-left: 0 !important;
    }
    
    .prt_heading h2 {
        margin-bottom: 0 !important;
    }
    
    /* Specific fixes for left-aligned H2 headers - About page */
    .prt_heading_wrapper_2 .prt_heading h2 {
        margin-top: 60px !important;
    }
    
    /* About page specific mobile fix - prevent header from sticking to image */
    .prt_about_details_wrapper .prt_heading_wrapper_2 .prt_heading h2,
    .prt_about_wrapper .prt_heading_wrapper_2 .prt_heading h2 {
        margin-top: 80px !important;  /* Extra space from image above on mobile */
        text-align: center !important;  /* Center main header like other pages */
    }
    
    /* About page mobile - center align wrapper too for consistency */
    .prt_heading_wrapper_2 {
        text-align: center !important;
    }
}

/* Strength page specific fix - center align while using wrapper_2 for proper spacing */
.prt_services_wrapper .prt_heading_wrapper_2 {
    text-align: center;
}

/* Strength page specific fix - move subtitle below the H2 line element */
.prt_services_wrapper .prt_heading_wrapper_2 .prt_heading p {
    bottom: -47px; /* Move to match spacing on other pages */
}