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

	.orbite-col {
		gap: 13px;
	}

	.orbite-ctn .orbite-col .orbite-wrap span.orbite-text {
		font-size: 16px;
		line-height: 120%;
	}

	.portfolio-center-image figure img {
		width: 100%;
		max-width: 295px;
	}

	.timeline-text .timeline-cont span {
		padding: 0 3rem 0 0;
	}

	.timeline-text .timeline-cont {
		font-size: 26px;
		left: -20px;
		padding: 10px 20px;
		/* 		width: 120%; */
	}

	.timeline-text:before {
		width: 120%;
		top: 50%;
		left: 50px;
	}

	.timeline-text::after {
		left: -20px;
		top: 0;
		width: 80px;
		height: 100%;
	}

	.timeline-wrapper {
		margin-left: 50px;
		padding-bottom: 20px;
		padding-top: 20px;
		overflow: visible;
	}

	.horizontal-scroll {
		gap: 30px;
		padding-left: 0px;
	}

	.chapter-panels {
		gap: 30px;
	}

	.panel {
		width: 350px;
		height: fit-content;
	}

	.horizontal-timeline {
		gap: 30px;
	}

	.chapter-panels-readmore .more-panels {
		gap: 30px;
	}

	.postid-375 .horizontal-scroll {
		width: calc(100% + 430%);
	}

	.readmore-active section.horizontal-container {
		overflow-x: visible;
	}

	.panel .image-info {
		bottom: 29px;
		border-radius: 0 0 10px 10px;
		width: 100%;
		padding: 15px;
	}

	html.safari .panel .image-info {
		bottom: 25.9px;
	}

	html.lenis.chrome .panel:hover .image-info:before {
		top: 9px;
	}

	.panel .image-info span.big-text {
		font-size: 40px;
	}

	.panel .image-info span.small-text {
		font-size: 20px;
	}

	.panel:before {
		height: 30%;
		top: auto;
		bottom: 29px;
	}

	.panel .image-panel img {
		height: auto;
	}

	.tab-button {
		border-radius: 10px;
		padding: 12px 20px;
		font-size: 14px;
		line-height: 110%;
		max-width: none;
	}

	.tab-buttons {
		display: grid;
		gap: 17px;
		grid-template-columns: repeat(8, auto);
		margin-bottom: 20px;
	}

	.tab-container .tab-content {
		border-radius: 10px;
		padding: 25px;
	}

	.media-container {
		gap: 25px;
	}

	.media-container .media-item .image-title {
		font-size: 18px;
		line-height: 120%;
	}

	.media-container .media-item img {
		border-radius: 10px;
		margin-bottom: 14px;
	}

	.postid-380 .horizontal-scroll {
		display: flex;
		width: 600vw;
	}

	.card-overlay h2.card-title {
		font-size: 18px;
		word-break: break-word;
	}

	.panel .image-info span.small-text,
	.card-overlay p.card-subtitle {
		font-size: 16px;
	}

	.card-overlay {
		padding: 16px 13px;
	}

	.cards-grid {
		gap: 25px;
		row-gap: 60px;
	}

	.read-more-btn {
		font-size: 18px;
		gap: 10px;
	}

	.popup-body {
		gap: 26px;
	}

	.popup-content {
		width: 100%;
		max-width: 900px;
		margin: 50px auto;
		border-radius: 10px;
	}

	.popup-body .popup-info h2 {
		font-size: 35px;
	}

	.popup-body .popup-info {
		padding: 0 30px 0 0;
	}

	body .foundation-link {
		font-size: 19px;
	}

	.media-container .media-item {
		width: 23.47%;
		height: max-content;
	}

	.media-container .media-item .readmore-ctn button.read-more-btn img {
		margin: 0;
		width: 20px;
		height: 20px;
		background: transparent;
	}

	.postid-375 .popup.active .popup-content {
		max-width: 80%;
	}

	.orbite-ctn .orbite-col .orbite-wrap.about-me {
		margin-bottom: 5rem;
	}

	.horizontal-timeline .timeline-text.text-visible:last-child {
		margin-left: 0rem;
	}

	.horizontal-scroll.active {
		margin-left: 0rem;
	}

	.safari body .card-image img {
		height: 100%;
	}

	.panel:hover .image-info:before {
		top: 5px;
	}

	/* Check 1367px and add css here */
}

@media only screen and (max-width: 1441px) and (min-width: 1367px) {
	/* 	.postid-375 .horizontal-scroll {
	width: 370vw;
} */
}

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

	.orbite-ctn .orbite-col .orbite-wrap span.orbite-text {
		font-size: 16px;
		line-height: 120%;
	}

	.orbite-col {
		gap: 40px;
		row-gap: 20px;
	}

	.portfolio-center-image figure img {
		width: 100%;
		max-width: 280px;
	}

	.timeline-wrapper {
		margin-left: -40px;
		padding-bottom: 20px;
		padding-top: 10px;
		overflow: visible;
	}

	.timeline-text .timeline-cont {
		font-size: 22px;
		left: -10px;
		padding: 10px 20px;
		/* 		width: 120%; */
	}

	.panel:before {
		height: 30%;
		top: auto;
	}

	.panel .image-info span.big-text {
		font-size: 34px;
	}

	.panel .image-info span.small-text {
		font-size: 19px;
	}

	.timeline-text .timeline-cont span {
		padding: 0 2rem 0 0;
	}

	.postid-375 .horizontal-scroll {
		width: calc(100% + 440%);
	}

	.panel {
		width: 320px;
		height: fit-content;
	}

	.tab-buttons {
		display: grid;
		gap: 14px;
		grid-template-columns: repeat(8, auto);
		margin-bottom: 20px;
	}

	.tab-button {
		border-radius: 8px;
		padding: 10px 18px;
		font-size: 12px;
		line-height: 100%;
		max-width: none;
	}

	.tab-container .tab-content {
		border-radius: 8px;
		padding: 20px;
	}

	.media-container {
		gap: 20px;
	}

	.media-container .media-item .image-title {
		font-size: 16px;
		line-height: 110%;
	}

	.postid-380 .horizontal-scroll {
		display: flex;
		width: 620vw;
	}

	.cards-grid {
		grid-template-columns: repeat(3, auto);
		gap: 25px;
		row-gap: 60px;
	}

	.popup-body .popup-info h2 {
		font-size: 30px;
	}

	.postid-386 .popup.active .popup-content {
		max-width: 80%;
	}

	html.safari .panel .image-info {
		bottom: 25.9px;
	}
	html.safari .panel:hover .image-info:before{
        top: 11px;
	}

	/* Check 1200px and add css here */
}

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

	.orbite-ctn .orbite-col .orbite-wrap span.orbite-text {
		font-size: 15px;
		line-height: normal;
	}

	.orbite-col {
		gap: 50px;
		row-gap: 20px;
		justify-content: space-between;
	}

	.portfolio-center-image figure img {
		width: 100%;
		max-width: 250px;
	}

	.panel {
		width: 280px;
		height: fit-content;
	}

	.panel .image-panel img,
	.cards-grid .card {
		border-radius: 6px;
	}

	.timeline-text::after {
		left: -20px;
		top: 0;
		width: 80px;
		height: 100%;
	}

	.timeline-text .timeline-cont {
		font-size: 20px;
	}

	.postid-375 .horizontal-scroll {
		width: calc(100% + 460%);
	}

	.horizontal-scroll {
		gap: 25px;
		padding-left: 0px;
	}

	.panel .image-info span.big-text {
		font-size: 30px;
	}

	.panel .image-info span.small-text {
		font-size: 17px;
	}

	li.tab-button:before {
		content: '';
		width: 14px;
		height: 16px;
		bottom: -1px;
	}

	.tab-buttons {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(8, auto);
		margin-bottom: 16px;
	}

	.tab-button {
		border-radius: 6px;
		padding: 8px 13px;
		font-size: 11px;
		line-height: normal;
		max-width: none;
	}

	.tab-container .tab-content {
		border-radius: 6px;
		padding: 15px;
	}

	.media-container {
		gap: 15px;
	}

	.media-container .media-item img {
		border-radius: 6px;
		margin-bottom: 10px;
	}

	.media-container .media-item .image-title {
		font-size: 15px;
		line-height: 100%;
	}

	li.tab-button.active:before {
		bottom: -16px;
	}

	.postid-380 .horizontal-scroll {
		display: flex;
		width: 640vw;
	}

	.card-overlay {
		padding: 12px;
	}

	.card-overlay h2.card-title {
		font-size: 18px;
	}

	.card-overlay p.card-subtitle {
		font-size: 16px;
	}

	.read-more-btn {
		font-size: 16px;
		gap: 8px;
	}

	.read-more-btn img {
		width: 15px;
		height: 15px !important;
	}

	.media-container .media-item .readmore-ctn button.read-more-btn img {
		margin: 0;
		width: 16px;
		height: 16px !important;
		background: transparent;
	}

	.popup-body .popup-info h2 {
		font-size: 25px;
	}

	.panel:before {
		bottom: 27px;
		border-radius: 0 0 6px 6px;
	}

	.panel .image-info,
	.panel .image-info:before {
		border-radius: 0 0 6px 6px;
	}

	body .popup-links a img {
		width: 20px;
	}

	.panel:hover .image-info:before {
		top: 7px;
	}

	html.lenis.chrome .panel:hover .image-info:before {
		top: 14px;
	}

	/* Check 1025px and add css here */
}

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

	.inner-contener>.elementor-container,
	.elementor>.elementor-section.elementor-section-boxed>.elementor-container {
		padding: 0 30px;
	}

	.header-wrapper .nav-bar nav.elementor-nav-menu--dropdown {
		position: fixed !important;
		bottom: 0;
		top: initial !important;
		left: 0% !important;
		width: 100% !important;
		height: calc(100% - 90px) !important;
		padding: 0 30px;
		transition: all 0.3s;
		overflow: auto;
		margin: 0 !important;
	}

	Body .timeline-wrapper {
		display: none;
	}

	.postid-375 .horizontal-scroll {
		width: 100%;
	}

	.horizontal-scroll {
		gap: 30px;
		padding-left: 0;
	}

	.horizontal-scroll {
		gap: 32px;
		padding-left: 0;
		flex-wrap: wrap;
	}

	.chapter-title {
		display: inline-block;
	}

	.timeline-text::after,
	.timeline-text:before {
		display: none;
	}

	body .gsap-section.elementor-section-height-full {
		height: 100%;
	}

	.chapter-panels,
	.chapter-panels-readmore .more-panels {
		gap: 20px;
		flex-wrap: wrap;
		overflow: unset;
	}

	.panel {
		width: 48.5%;
		height: fit-content;
	}

	body.readmore-active {
		overflow-y: visible;
	}

	.timeline-text .timeline-cont span {
		padding: 0;
		text-wrap: auto;
		word-break: auto-phrase;
	}

	.timeline-text .timeline-cont {
		font-size: 20px;
		padding: 0 0px 10px 10px;
	}

	.panel .image-info span.big-text {
		font-size: 25px;
	}

	.panel .image-info span.small-text {
		font-size: 14px;
	}

	.tab-buttons {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(4, auto);
		margin-bottom: 16px;
	}

	li.tab-button:before {
		display: none;
	}

	.media-container .media-item .image-title {
		font-size: 14px;
		line-height: normal;
	}

	.postid-381 .horizontal-scroll,
	.postid-380 .horizontal-scroll {
		width: auto;
	}

	.mobile-spcae .horizontal-scroll {
		padding-top: 0px;
	}

	.mobile-spcae .chapter-title {
		display: none;
	}

	.panel:hover .image-info:before,
	.panel:focus .image-info:before,
	.panel .image-info:before {
		top: 7px;
	}

	html.lenis.chrome .panel:hover .image-info:before,
	html.lenis.chrome .panel:focus .image-info:before,
	html.lenis.chrome .panel .image-info:before {
		top: 14px;
	}

	span.animation-text,
	span.animation-text-two {
		bottom: 0px;
		transition: all 0.5s ease-in-out;
	}

	body .image-panel video {
		width: 500px;
		height: auto;
	}

	.card-overlay h2.card-title {
		font-size: 16px;
	}

	.card-overlay p.card-subtitle {
		font-size: 13px;
	}

	.cards-grid {
		grid-template-columns: repeat(3, auto);
		gap: 20px;
		row-gap: 50px;
	}

	.popup-content {
		width: 50%;
		max-width: none;
		margin: 30px auto;
		border-radius: 10px;
	}

	.popup-body {
		gap: 15px;
		flex-wrap: wrap;
	}

	.popup-image,
	.popup-info {
		width: 100%;
	}

	.popup-body .popup-info h2 {
		font-size: 30px;
	}

	.popup-body .popup-info {
		padding: 0 20px 30px;
	}

	.popup-body .popup-info .description {
		padding: 10px 0px;
	}

	body .foundation-link {
		font-size: 17px;
	}

	.popup-image {
		height: 400px;
	}

	.media-container .media-item {
		width: 31.8%;
		height: max-content;
	}

	.postid-386 .popup-content .popup-info {
		padding-block: 0 30px;
	}

	.postid-386 .popup.active .popup-content {
		max-width: none;
		width: 60%;
	}

	.postid-386 .popup.active {
		overflow-y: scroll;
	}

	.postid-375 .popup-image img {
		object-fit: contain;
	}

	.orbite-col {
		gap: 20px;
		row-gap: 20px;
		justify-content: center;
	}

	.orbite-ctn .orbite-col .orbite-wrap {
		width: 48.4%;
	}
	
	html.safari .panel:hover .image-info:before,
	html.safari .panel:focus .image-info:before,
	html.safari .panel .image-info:before {
		top: 11px;
	}

	/* Check 768px and add css here */
}

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

	.inner-contener>.elementor-container,
	.elementor>.elementor-section.elementor-section-boxed>.elementor-container {
		padding: 0 20px;
	}

	.notfound-content {
		padding: 12vw 0;
	}

	.tab-buttons {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(2, auto);
		margin-bottom: 14px;
	}

	.tab-container .tab-content {
		border-radius: 6px;
		padding: 12px;
	}

	.media-container {
		gap: 10px;
	}

	.youtube-iframe,
	video {
		height: 200px;
	}

	.orbite-ctn .orbite-col .orbite-wrap span.orbite-text {
		font-size: 11px;
		line-height: 100%;
	}

	.portfolio-center-image figure img {
		width: 100%;
		max-width: 180px;
	}

	.panel {
		width: 47.4%;
		height: fit-content;
	}

	.panel .image-info {
		padding: 10px;
	}

	.panel .image-info span.big-text {
		font-size: 20px;
	}

	span.btn-wrapper {
		font-size: 16px;
	}

	.popup-content {
		width: 100%;
		max-width: none;
		margin: 30px auto;
		border-radius: 10px;
	}

	.popup-image {
		height: 450px;
	}

	.popup.active {
		padding-inline: 20px;
	}

	.popup-body .popup-info h2 {
		font-size: 25px;
	}

	.cards-grid {
		grid-template-columns: repeat(2, auto);
		gap: 20px;
		row-gap: 52px;
	}

	.read-more-btn {
		font-size: 14px;
		gap: 6px;
	}

	body .card-image img,
	.card-image:before {
		border-radius: 6px;
	}

	.card-overlay {
		padding: 8px;
		bottom: 0px;
		z-index: 999;
	}

	.card-overlay h2.card-title {
		font-size: 16px;
	}

	.media-container .media-item {
		width: 48.7%;
		height: max-content;
	}

	.postid-386 .popup.active .popup-content {
		max-width: none;
		width: 90%;
	}

	body .popup-links a {
		font-size: 18px;
	}

	.panel .image-info {
		bottom: 25px;
	}

	.panel:before {
		bottom: 23px;
	}

	.card-image:before {
		height: 60%;
	}

	.panel:hover .image-info:before,
	.panel:focus .image-info:before,
	.panel .image-info:before {
		top: 6px;
	}

	html.lenis.chrome .panel:hover .image-info:before,
	html.lenis.chrome .panel:focus .image-info:before,
	html.lenis.chrome .panel .image-info:before {
		top: 10px;
	}

	/* Check 480px and add css here */
}

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

	.orbite-ctn {
		display: none;
	}

	.orbite-mobile-ctn {
		display: block;
		width: 100%;
		z-index: 999;
		position: relative;
	}

	.portfolio-col {
		width: 100%;
	}

	.portfolio-center-image {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.orbite-mobile-ctn .orbite-mobile-col .orbite-mobile-wrap a,
	.orbite-mobile-ctn .orbite-mobile-col .orbite-mobile-wrap a span.orbite-text {
		width: 100%;
		display: inline-block;
	}

	.orbite-mobile-ctn .orbite-mobile-col .orbite-mobile-wrap a span.orbite-text br {
		display: none;
	}

	.orbite-mobile-ctn .orbite-mobile-col .orbite-mobile-wrap a span.orbite-text {
		border: 1.06px solid rgba(53, 120, 223, 0.20);
		background: rgba(30, 30, 30, 0.2);
		backdrop-filter: blur(8px);
		box-shadow: 0px 0px 55.89px 0px rgba(53, 120, 223, 0.05);
		padding: 30px 20px;
		text-align: center;
		color: #fff;
	}

	.orbite-mobile-ctn .orbite-mobile-col {
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding-block: 2rem 3rem;
	}

	.orbite-mobile-wrap.about-me {
		margin-bottom: 2rem;
	}

	.portfolio-section,
	.portfolio-container {
		height: 100%;
	}

	body .orbite-mobile-ctn .orbite-mobile-col .orbite-mobile-wrap:hover {
		background: #3578DF;
		border: 1.167px solid rgba(255, 255, 255, 0.20);
		box-shadow: 0px 0px 61.502px 0px rgba(53, 120, 223, 0.05);
		transition: all 0.3s ease;
	}

}


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

	.inner-contener>.elementor-container,
	.elementor>.elementor-section.elementor-section-boxed>.elementor-container {
		padding: 0 15px;
	}

	.youtube-iframe,
	video {
		height: 150px;
	}

	.image-title {
		font-size: 12px;
	}

	.orbite-mobile-ctn .orbite-mobile-col {
		gap: 30px;
	}

	.orbite-mobile-ctn .orbite-mobile-col .orbite-mobile-wrap a span.orbite-text {
		padding: 25px 0px;
	}

	.panel {
		width: 100%;
		height: fit-content;
	}

	.tab-buttons {
		gap: 10px;
		grid-template-columns: repeat(1, auto);
		margin-bottom: 12px;
	}

	.media-container {
		gap: 32px;
	}

	.media-container .media-item img {
		border-radius: 6px;
		margin-bottom: 5px;
	}

	.cards-grid {
		grid-template-columns: repeat(1, auto);
		gap: 20px;
		row-gap: 62px;
	}

	.popup-image {
		height: 380px;
	}

	.popup.active {
		padding-inline: 15px;
		overflow-y: scroll;
	}

	.popup-body .popup-info {
		padding: 0 14px 20px;
	}

	.read-more-btn {
		font-size: 16px;
		gap: 6px;
	}

	.read-more-btn img {
		width: 18px;
		height: 18px !important;
	}

	.popup-body .popup-info .description {
		font-size: 14px;
	}

	.media-container .media-item {
		width: 100%;
		height: max-content;
	}

	.postid-386 .popup.active .popup-content {
		max-width: none;
		width: 100%;
	}

	body .popup-links a {
		font-size: 16px;
	}

	.chapter-panels,
	.chapter-panels-readmore .more-panels {
		gap: 32px;
		flex-wrap: wrap;
		overflow: unset;
	}

	.postid-375 .popup.active .popup-content {
		max-width: 100%;
	}

	.panel:hover .image-info:before,
	.panel:focus .image-info:before,
	.panel .image-info:before {
		top: 3px;
	}
	
	html.lenis.chrome .panel:hover .image-info:before,
	html.lenis.chrome .panel:focus .image-info:before,
	html.lenis.chrome .panel .image-info:before {
		top: 7px;
	}

	/* Check 375px and add css here */
}

@media only screen and (max-width: 374px) {
	/* Check 320px and add css here */

	.single-portfolio .elementor-page-title h1.elementor-heading-title {
		text-box-trim: trim-both;
		word-break: break-all;
	}
}