/* Base */

*,:before,:after {
	box-sizing:border-box;
	border:0 solid #e5e7eb }
html,:host {
	-webkit-text-size-adjust:100%;
	tab-size:4;font-feature-settings:normal;
	font-variation-settings:normal;
	-webkit-tap-highlight-color:transparent;
	font-family:Inter,sans-serif; }
body {
	line-height:inherit;
	margin:0 ;
	background-color:rgb(249 249 249);
	color: #000;
	font-family:Inter,sans-serif }
hr {
	height:32px;
	color:inherit;
	border-top-width:1px;
	margin: 1em 0;}
abbr {
	-webkit-text-decoration:underline dotted;
	text-decoration:underline dotted }
h1 {
	font-size:inherit;
	font-weight:inherit }
h2, h3	{
	color: #0c3746;
	font-weight: 700;
	}
h4, h5 {
	color: #0c3746;
	margin: 1.25em 0;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	}
h6 {
  color: #0c3746;
  margin: -1.75em 0 2em 0.1em;
   }
h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
	}
h2 {
	font-size: 1.75em;
	text-transform: uppercase;
	}
h3 {
	font-size: 1.5em;
	text-transform: uppercase;
	}
h4 {
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25em;
	}
h5 {
	font-size: 1em;
	line-height: 1em;
	font-weight: 600;
	}
h6 {
	font-size: 0.8em;
	font-weight: 500;
	}
a {
	text-decoration: none;
 	color: inherit }
b,strong {font-weight:bolder}
code,kbd,samp,pre {
	font-feature-settings:normal;
	font-variation-settings:normal;
	font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
	font-size:1em }
small {font-size:80%}
sub,sup {
	vertical-align:baseline;
	font-size:75%;
	line-height:0;
	position:relative }
sub {bottom:-.25em }
sup {top:-.5em }
table {
	text-indent:0;
	border-color:inherit;
	border-collapse:collapse }
button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: inherit }
button,input,optgroup,select,textarea {
	font-feature-settings:inherit;
	font-variation-settings:inherit;
	font-family:inherit;
	font-size:100%;
	font-weight:inherit;
	line-height:inherit;
	letter-spacing:inherit;color:inherit;
	margin:0;
	padding:0 }
button,select {text-transform:none }
button,input {
	-webkit-appearance:button;
	background-color:#0000;
	background-image:none }

:-moz-focusring { outline:auto }
:-moz-ui-invalid{ box-shadow:none } progress { vertical-align:baseline }
::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{ height:auto }

[type=search]{-webkit-appearance:textfield;outline-offset:-2px}

::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

summary {display:list-item }

fieldset {margin:0;
	padding:0;
}
legend {padding:0 }
ol,ul,menu {
	margin:0;
	padding:0;
	list-style:none }
dialog{padding:0}
textarea{resize:vertical}
input::-moz-placeholder{opacity:1;color:#9ca3af}
textarea::-moz-placeholder{opacity:1;color:#9ca3af}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
button,[role=button]{cursor:pointer}

:disabled{cursor:default}

img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}
img,video{max-width:100%;height:auto}
hidden {display:none}


/* Rows */

.row > * { 
	float: left;
	padding: 0 1em; }

.row:after {
	content: '';
	display: block;
	clear: both;
	height: 0;}

.row:first-child > * { padding-top: 0 !important; }
.row.uniform > * > :first-child { margin-top: 0; }
.row.uniform > * > :last-child { margin-bottom: 0; }


/* Misc */

.strike {
	text-decoration:line-through;
	text-decoration-style:solid;
	text-decoration-line: line-through;
	}

.img-caption {
	color: #666;
	font-family: Roboto, Light;
	font-size: 13px;
	line-height: 18px;
	font-weight: 200;
	padding: 5px 8px 0 0;
	text-align: right;
}

.img-credit {
	text-transform: uppercase;
}


/* Nav Bar Menu */

.icon {
	display: block;
  	max-width: 50px;
	width: auto;
  	max-height: 50px;
	height: auto;
	background-color: var(--light-grey);
	margin-right: 10px;}

#nav-menu {
  border-bottom: var(--border)
}

.menu {
  position: relative;
  background: var(--white);
}

.menu-bar li:first-child .dropdown {
  flex-direction: initial;
  min-width: 480px;
}

.menu-bar li:first-child ul:nth-child(1) {
  border-right: var(--border);
}

.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
  border-bottom: var(--border);
}

.menu-bar .dropdown-link-title {
  font-weight: 600;
}

.menu-bar .nav-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.6px;
  padding: 0.3rem;
  min-width: 60px;
  margin: 0 0.6rem;
}

.menu-bar .nav-link:hover,
.dropdown-link:hover {
  color: #00f0b5;
}

.nav-start,
.nav-end,
.menu-bar {
  display: flex;
  align-items: center;
}

.dropdown {
  display: flex;
  flex-direction: column;
  min-width: 230px;
  background-color: var(--white);
  border-radius: 10px;
  position: absolute;
  top: 36px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.97) translateX(-5px);
  transition: 0.1s ease-in-out;
  box-shadow: var(--shadow);
}

.dropdown.active {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateX(5px);
}

.dropdown ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 5rem .5rem .5rem;
  font-size: 0.95rem;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
}

.dropdown-link {
  display: flex;
  gap: 0.5rem;
  margin: .2rem;
  transition: 0.1s ease-in-out;
}

.dropdown-link p {
  font-size: 0.8rem;
  color: var(--medium-grey);
  margin-top: 8px;
}

#hamburger {
  display: none;
  padding: 0.1rem;
  margin-left: 1rem;
  font-size: 1.9rem;
}

	@media (max-width: 1280px) {
	  #hamburger {
		display: block }
	  .menu {
		display: none;
		position: absolute;
		top: 87px;
		right: 0;
		min-height: 100vh }
	  .menu-bar li:first-child ul:nth-child(1) {
		border-right: none;
		border-bottom: var(--border) }
	  .dropdown {
		display: none;
		min-width: 100%;
		border: none !important;
		border-radius: 5px;
		position: static;
		top: 0;
		left: 0;
		visibility: visible;
		opacity: 1;
		transform: none;
		box-shadow: none }
	  .menu.show,
	  .dropdown.active {
		display: inline-flex;
		width: flex }
	  .menu-bar {
		display: flex;
		flex-direction: column;
		align-items: initial;
		row-gap: 1rem;
		padding: 1rem;
		width: 675px }
	  .menu-bar .nav-link {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-weight: 600;
		font-size: 1.1rem;
		margin: 0 }
	  .menu-bar li:first-child .dropdown {
		min-width: 100% }
	  .menu-bar > li:not(:last-child) {
		padding-bottom: 0.5rem;
		border-bottom:  1px solid rgba(255, 255, 255, 0.1) }
	}

	@media (max-width: 700px) {
		.menu-bar {
		row-gap: 1rem;
		padding: 1rem;
		width: auto }
		.dropdown ul {
		padding: 8px 0;
		margin-right: 5rem;}
		.menu.show, .dropdown.active {
		min-width: 100% }
		ul.menu-bar    {
		min-width: 100% }
	}

	@media (max-width: 600px) {
		.dropdown ul {
		margin-right: 1.4rem;
		 }
	}

/* DrIpdown Containers (navbar) */

.dripdown {
	overflow: hidden;
}

.dripdown .dripbtn {
	border: none;
	outline: none;
	padding: 14px 0;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.dripdown-content {
	display:none;
	position: absolute;
	background-color: rgba(34,34,40,0.90);
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
	z-index: 1;
	overflow: hidden;
}

.dripdown-content a {
	float:none;
	color: #fff;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	font-size: 13px;
}

.dripdown-content a:hover {
	color: #00f0b5;
}

.dripdown:hover .dripdown-content {
	display: block;
}


/* Main Content */

main {
  padding-bottom:0;
  padding-top:0;
}

.site-content {
	padding: 0px 50px;
	position: relative;
	z-index: 1; 
	margin-left: auto;
	margin-right: auto;
	width: 100%; }

	@media(max-width: 800px) {
		.site-content {
		padding: 0px 20px;
		}
	}

	@media(max-width: 500px) {
		.site-content {
		padding: 0; }
	}

/* Projects */

.Project-1a {
  pointer-events: none;
  margin-bottom:50px;
  position:relative; 
  background-color: rgb(255 255 255);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.16)}

.site-content .Project-1a {
  text-align:left;
}

	@media(min-width: 1025px) {
	  .Project-1a {
		margin-left:auto;
		margin-right:auto;
		max-width:1400px;
		width:calc(100% - 17%)
	  }
	}
	@media(max-width: 1024px) {
	  .Project-1a {
		align-items:flex-start;
		margin-bottom:50px;
	  }
	}

	@media(max-width: 800px) {
	  .Project-1a {
		align-items:flex-start;
		margin-bottom:30px;
	  }
	}

	@media(max-width: 500px) {
	  .Project-1a {
		align-items:flex-start;
		margin-bottom:20px;
	  }
	}

.Project-2B {
	padding: 32px 7.1% 24px;
	color: #696969;
	pointer-events: all;
    font-size: 17px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.6em;
    text-align: left;
}

.Project-2B a {
	color:rgb(2 130 104);
	text-decoration: underline;
	text-decoration-style: dotted;
}

.Project-2B a:hover {
	color:rgb(0 255 204)
}

.Project-2B p {
	padding: 0 0 1em;
	letter-spacing: normal;
	font-size: 16px;
}

.Project-2B.image-full,
.Project-2B.embed-full {
  padding-left:0;
  padding-right:0
}

.Project-2B-image {
  text-align:center
}
.Project-2B-image img {
  display:inline-block;
  max-width:100%;
  vertical-align:middle
}



/* Wordpress Elements */

.page-header {
	margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
    width: calc(100% - 17%);
	color: #0c3746;
	font-size: 20px;
	font-weight: 600;
}

@media(max-width: 1008px) {
	.page-header {
		
	}
}

.entry-footer {
	gap:1em;
	display: flex;
	font-size: 13px;
	margin-top: 16px;
}

.entry-title a {
	color: #222 ;
	text-decoration: none;
}

.entry-meta {
	font-size: 13px;
}

.comments-area {
	margin: 3em 7.6923% 3em;
	background-color:#ffffff;
	padding:20px 40px;
	border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.16)
}

@media(max-width: 1008px) {
	.comments-area {
	margin: 1em 2% 1em;
	padding:10px 30px;
	}
}

.page-header-b {
  margin: 1em;
  color: #0c3746;
  font-size: 20px;
  font-weight: 600;
}

/* ??? */
@media(max-width: 1008px) {
	.page-header-b {
	padding-left: 1%;
	margin-left: 0;
	}
}


/* Portfolio Main */

#portfolio p {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 16px;
	line-height: 1.5em;
	letter-spacing: normal;
}

#portfolio.site-content {
	padding: 0px 50px;
	position: relative;
	z-index: 1; 
	margin-left: auto;
	margin-right: auto; 
	max-width: 1400px; }

	@media(max-width: 900px) {
		#portfolio.site-content {
		padding: 0px 20px 20px;
		}
		#sidebar {
		display: none;
		}
		#rightbar {
			width: 100%;
		}
	}
	@media(max-width: 500px) {
		#portfolio.site-content {
		padding: 0;
		}
	}

.wrapper.style1 {
	background: #fff;
	color: #555f66;
	border-radius: 3px;
  	box-shadow: 0 1px 2px rgba(0,0,0,.16);
	padding: 24px;
	}

@media(max-width: 600px) {
	.wrapper.style1 {
	padding: 16px;
	}
}

/* Portfolio Sidebar */

#portfolio ul {
	list-style: none;
	text-decoration: none;
	padding-left: 0em;
	line-height: 2em;
	}

#portfolio ul a {
	text-decoration: none;
	color: #555f5f;
	}

#portfolio ul li a:hover {
	color: #00FFcc;
	text-decoration: none;
	}


/* Responsive Image Gallery Grid */
    .gallery {
      display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(200px, 14em));
	  gap: 12px;
      max-width: 1200px;
      border-radius: 10px;
	  justify-content:space-around;
    }

    .gallery img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    /* Hover effect for gallery images */
    .gallery img:hover {
      transform: scale(1.2);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 24.5em;
  }
  .gallery img:hover {
      transform: scale(1.05);
	}
}


/* Portfolio Page */

.please {
	background-color: pink;
	margin: 10px;
	padding: 10px;
}

.note {
	border: dashed;
	border-color: #fff;
	border-width: thick;
	padding: 21px;
	color: #333;
	text-align: center
}

/* Sub sub flex bar */

.webdesign-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.gallery-left {
	flex-grow: 1;
	margin-bottom: 1em;
}

.gallery-left img {
	border: solid;
	border-color: rgb(2 130 104);
}

.gallery-left img:hover {
	border: dashed;
	border-color: rgb(0 255 204);
}

.gallery-right {
	flex-grow: 1;
}

.gallery-right a {
	color:rgb(2 130 104);
	text-decoration: underline;
	text-decoration-style: dotted;
}

.gallery-right a:hover {
	color:rgb(0 255 204)
}