/*
Theme Name:By Two Studio
Description:By Two Studio Child Theme
Author:Silky Ocean Studios
Author URI:http://www.silkyoceanstudios.com
Template:twentytwentyone
Version:2.5.0
License:GNU General Public License v2 or later
License URI:http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Text meant only for screen readers. */
.screen-reader-text { clip:rect(1px, 1px, 1px, 1px); height:1px; overflow:hidden; position:absolute !important; width:1px; word-wrap:normal !important; }
.screen-reader-text:focus { background-color:#f1f1f1; border-radius:3px; box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.6); clip:auto !important; color:#21759b; display:block; font-size:0.875rem; font-size:14px; font-weight:700; height:auto; left:5px; line-height:normal; padding:15px 23px 14px; text-decoration:none; top:5px; -webkit-border-radius:3px; -webkit-box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.6); width:auto; z-index:100000; }


body { background:#FCF8F2 !important; color:#645346; font-family:"PT Serif", serif; line-height:1.2; position:relative; overflow-x:hidden; font-size:1.08rem; }
input,
button,
textarea { font-family:"PT Serif", serif; font-size:1rem; }
select { font-family:"PT Serif", serif; font-size:0.938rem; }

a { color:#645346; text-decoration:none; -webkit-transition:0.25s; -o-transition:0.25s; transition:0.25s; }
a:hover { color:#bd9f94; text-decoration:none; }
.list li { margin-bottom:1rem }

.dropdown-item, .dropdown-item { color:#333333 !important; }
.dropdown-item:focus, .dropdown-item:hover { color:#d9904e !important; }

.text-muted { color: #fcf8f2 !important;}

ol, ul {text-align: left;}

hr { background-color: #65534633;  width: 90%;  height: 0.5px;  margin: 1rem auto;  border: 0;  opacity: 1;  display: flex;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom:1rem; font-family:'Inter', sans-serif; font-weight:400; letter-spacing:1.5px; text-transform:uppercase;}
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, h1 a, h2 a, h3 a, h4 a, h5 a { color:inherit !important; }
.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { text-decoration:none !important; }
.body-content p + h2, .body-content p + h3, .body-content p + h4, .body-content p + h5 { margin-top:2.5rem; }
.h1, h1 { font-size:18px; }
.h2, h2 { font-size:17px; }
.h3, h3 { font-size:1.313em; }
.h4, h4 { font-size:1.250rem; }
.h5, h5 { font-size:0.8rem; }
.h6, h6 { font-size:0.5rem; }


@media (min-width:576px) {
    .h1, h1 { font-size:18px; }
    .h2, h2 { font-size:17px; }
    .h3, h3 { font-size:1.438rem; }
    .h4, h4 { font-size:1.250rem; }
    .h5, h5 { font-size:0.8rem; }
    .h6, h6 { font-size:0.5rem; }
}

@media (min-width:768px) {
    .h1, h1 { font-size:18px; }
    .h2, h2 { font-size:17px; }
    .h3, h3 { font-size:1.500rem; }
    .h4, h4 { font-size:1.250rem; }
    .h5, h5 { font-size:0.8rem; }
    .h6, h6 { font-size:0.5rem; }
}

@media (min-width:992px) {
    .h1, h1 { font-size:18px; }
    .h2, h2 { font-size:17px; }
    .h3, h3 { font-size:1.500rem; }
    .h4, h4 { font-size:1.313rem; }
    .h5, h5 { font-size:1.188rem; }
    .h6, h6 { font-size:0.8rem; }
    p.lead { font-size:1.2rem; }
}

@media (min-width:1200px) {
    .h1, h1 { font-size:18px; }
    .h2, h2 { font-size:17px; }
    .h3, h3 { font-size:15px; }
    .h4, h4 { font-size:13px; }
    .h5, h5 { font-size:11px; }
    .h6, h6 { font-size:10px; }
}

p { margin-top:0; margin-bottom:0.85rem; }
i.fa { color:#d9904e; }

h1.entry-title { font-size: 3rem; color: #032f4f;}

.text-blue { color:#032f4f; }

.bg-green {background:#a1b194; color:#FCF8F2;}
.bg-pink {background:#CBAA9F; color:#FCF8F2;}
.bg-light {background:#FCF8F2!important; color:#645346;}
.bg-caramel { background: #baa689; color: #fcf8f2;}

.hero
.hero .h1 { position:relative; opacity:0; transform:translateY(-20px); transition:transform 600ms ease-in-out, opacity 600ms ease-in-out; -webkit-transition-delay:.1s; transition-delay:.1s }

h6.subheading { text-transform:uppercase; font-size:0.8rem; letter-spacing:1px; position:relative; }
h6.subheading:after { content:""; position:absolute; width:100px; background:#d9904e; height:0.3rem; display:inline-block; margin:0.2rem 0.4rem; }

footer {background:#cbb798;}
footer h4 { font-family:"PT Serif", serif; font-size:24px; }
footer span, footer li {font-family:'Inter', sans-serif; font-size:16px;}

.vr {  display: inline-block; align-self: stretch; width: 1px; min-height: 1em; background-color: currentcolor;  opacity: .25;  padding: 0;}

/***** CUSTOM STYLES *****/
img { display:inline-block; max-width:100%; height:auto; }
blockquote { padding:0; font-style:italic }

/*Header*/
.header { -webkit-transition:all 300ms ease-in-out 0s; transition:all 300ms ease-in-out 0s; }
.navbar-brand { width: 270px; padding: 0;}
.navbar-expand-lg .navbar-nav .nav-link { font-family:'Inter', sans-serif; font-weight:400; color:#f6f5f3; font-size:0.813rem;  text-transform:uppercase; letter-spacing:1px; padding:0.5rem 1rem; }
.navbar .btn { color:rgba(255,255,255,1); }
.navbar .btn:hover { color:rgba(255,255,255,.75); }
.dropdown-menu { min-width:14rem; box-shadow:0 4px 14px rgba(0,0,0,0.2); border:none; border-radius:0; margin:0; }
.dropdown-item { font-size:0.813rem; color:#d9904e; text-transform:uppercase; font-weight:700; padding:.75rem 1.5rem; }
.navbar {padding:0;}

.navbar .navbar-collapse {  color: #645346;  padding: 0 0 1rem 0;}
.navbar .navbar-collapse .nav-item a {  color: #fcf8f2;  text-align: center;  padding: 1rem 0;}

.top-header {  background-color: #012138;}
.top-header a span {font-size: 0.813rem; font-weight: 600; text-transform: uppercase;  letter-spacing: 1px;  padding: 0 1rem;}

.footer .navbar-brand { width:100%; display:inline-flex; }

@media (min-width:992px) {
    .navbar-brand img { width:200px !important; }
    .navbar-expand-lg .navbar-nav .nav-link { padding-right:.75rem; padding-left:.75rem; }
	.footer .navbar-brand { width:95px; display:inline-flex; }
}

.navbar-btn { margin:0; }
.navbar-nav > li > a, .navbar-nav .fa { color:#fcf8f2; font-family:'Inter', sans-serif; font-weight:400; }
.navbar-nav > li > a:hover { color:#645346  !important ; background:transparent; }

.nav-link {padding:0.8rem 0;}

.navbar-dark .navbar-toggler { color:rgba(255,255,255,.5); border-color:transparent; }

.dropdown-toggle::after { box-sizing:border-box; height:6px; width:6px; border-style:solid; border-color:#fcf8f2; border-width:0px 1px 1px 0px; transform:rotate(45deg); transition:border-width 150ms ease-in-out; }
.dropdown:hover > .dropdown-menu { display:block; }

.form-control {color: #645346; border-radius:0; border-bottom:var(--bs-border-width) solid #645346; border-top: 0; border-left: 0; border-right: 0; background:transparent;}
.form-control:focus { color: #645346; background-color: transparent; border-color: transparent; outline: 0; box-shadow: none; border-bottom: 1px solid #645346;}

span.wpcf7-form-control.wpcf7-checkbox {  display: flex; flex-flow: wrap; justify-content: center;}
.wpcf7-list-item { display: inline-block; margin: 0 1.5rem; text-transform: capitalize; padding: 0.2rem 0;}
.wpcf7-acceptance span.wpcf7-list-item { text-transform: none;}

.sidebar {display: flex;height: 100vh;	position: sticky;	top: 0;	flex-direction: column;	justify-content: space-between;	background-color: #a1b194; color: #FCF8F2;	padding: 1rem 0;}

.navbar-nav .nav-link { color: white; text-transform: uppercase;  letter-spacing: 1.5px; font-size: 13px;}

.navbar-nav .nav-link:hover {text-decoration: none; color:#bd9f94 ;}

/*Footer*/
footer, footer a { color:#645346; font-size:0.938em; }
footer a:hover { color:#cccccc; }
.footer h4 { margin-bottom:1rem; }
.lower-footer { background:#b99e89; color:#fcf8f2; }

/*BUTTONS*/
.btn, .property_actions a { font-family:'Inter', sans-serif; font-size:0.8rem; font-weight:400; letter-spacing:0.063rem; padding:0.5rem 2.5rem; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; text-transform:uppercase; margin-top:1rem; }
.btn-lg { padding:1.500rem; }
.btn-primary { background:#a1b194 !important; border:1px solid #a1b194 !important; border-radius:0; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background:#e3c68e !important; border-color:#e3c68e !important; }
.btn-default { background:transparent; border:1px solid #fcf8f2; color:#fcf8f2; }
.btn-default:hover, .btn-default:active, .btn-default:focus { background:#fcf8f2; border-color:#fcf8f2; color:#202020; }
.btn-secondary { background:#e3c68e; border-color:#e3c68e; }
.btn-secondary:hover { background:#d9904e; border-color:#d9904e; }

.btn-outline-light:hover, .btn-outline-light:active, .btn-outline-light:focus {  background: #fcf8f2  !important;  border-color: #fcf8f2  !important;  color: #645346;}
.btn-outline-green {background:transparent !important; border:1px solid #a1b194 !important; color:#a1b194;}
.btn-outline-green:hover, .btn-outline-light:active, .btn-outline-light:focus { background:#cbb798 !important; border-color:#cbb798 !important; color:#645346; }
.btn-outline-dark {background:transparent !important; border:1px solid #645346 !important; color:#645346;}
.btn-outline-dark:hover, .btn-outline-light:active, .btn-outline-light:focus { background:#baa689 !important; border-color:#baa689 !important; color:#645346; }

.btn-light {color:#86937B;}

/*HERO BG*/
.hero { position:relative; overflow:hidden; }
.hero,
.hero .hero-bg .hero-bg-image { min-height:80vh; }
.hero.hero-secondary,
.hero.hero-secondary .hero-bg .hero-bg-image { min-height:240px; }

.hero.hero-home { background: url(/wp-content/uploads/2025/09/collov-home-design-H-1j_s0dhCw-unsplash.png) 50% 50% no-repeat;background-size: cover;}
.hero.hero-workingwithus { background: url(/wp-content/uploads/2026/03/our-approach.jpg) 50% 50% no-repeat;background-size: cover;color:#fcf8f2;}
.hero.hero-portfolio { background: url(/wp-content/uploads/2026/03/the-luxe-home.jpg) 50% 50% no-repeat;background-size: cover;color:#fcf8f2; background-position:bottom;}
.hero.hero-getintouch { background: url(/wp-content/uploads/2026/02/the-elegant-home-6.jpg) 50% 50% no-repeat;background-size: cover;color:#fcf8f2; background-position-y: 75%;}
.hero.hero-thestudioedit { background: url(/wp-content/uploads/2026/02/by-two-studio-the-studio-edit-banner.jpg) 50% 50% no-repeat;background-size: cover;color:#fcf8f2;}

.hero.hero-home hr {margin:1rem 0;}

.hero.hero-sm { min-height:400px; }

.hero .hero-bg { order:1; z-index:2; width:100%; height:100%; }
.hero .hero-content { z-index:4; position:absolute;}
.hero.hero-home .hero-content {margin-top: 3rem;}
.hero .hero-bg .hero-bg-image { z-index:2; position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; overflow:hidden; }
.hero .hero-bg .hero-bg-image.hero-bg-image-xs img { object-fit:cover; width:auto; height:100%; }
.hero .hero-bg .hero-bg-image.hero-bg-image-sm img { object-fit:cover; width:auto; height:100%; }
.hero .hero-bg .hero-bg-image.hero-bg-image-md img { object-fit:cover; width:auto; height:100%; }
.hero .hero-bg .hero-bg-image.hero-bg-image-lg img { object-fit:cover; width:100%; height:auto; }
.hero:after, .hero-secondary:after { content:""; display:block; background:linear-gradient(0deg, #00000061, transparent); width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; }

.hero .hero-slider, .hero .hero-single-img { position:relative; z-index:2; width:100%; height:100%; overflow: hidden; }
.hero,
.hero .hero-slider,
.hero .slick-track,
.hero .slick-slide,
.hero .slick-slide img,
.hero .hero-single-img img { min-height:90vh; height:90vh; object-fit:cover; width:100%; height:100%; }

.hero.hero-small {  min-height:55vh;  display: flex;  align-items: end;  justify-content: end;}

@media (min-width:991px) {
    .hero,
    .hero .hero-bg .hero-bg-image { min-height:100vh; }
    .hero.hero-secondary,
    .hero.hero-secondary .hero-bg .hero-bg-image { min-height:400px; }
	.hero.hero-home .hero-content {margin-top: 0rem;}
		.hero .hero-slider,
	.hero .slick-track,
	.hero .slick-slide { min-height:100vh; height:100vh; }
	.hero.hero-small {  min-height: 50vh;  display: flex;  align-items: end;  justify-content: end;}

}

@media (max-width:767px) {
    footer .social li { border:none !important; display:inline-block; margin-right:0; }
    footer .social i { line-height:40px; }
}


.svg-icon { width:1.250rem; height:1.250rem; }
.svg-icon.icon-lg { width:1.750rem; height:1.750rem; }
.svg-icon path, .svg-icon polygon, .svg-icon rect { fill:#444; }
.svg-icon circle { stroke:#444; stroke-width:1; }

.footer .svg-icon path, .footer .svg-icon polygon, .footer .svg-icon rect { fill:#fcf8f2; }
.footer .svg-icon circle { stroke:#fcf8f2; }

/* Video */
video#myvideo { object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%;}

.embed-responsive-16by9::before { padding-top:178.25%; }

@media screen and (min-width:768px) {
    .embed-responsive-16by9::before { padding-top:56.25%; }
}

@media screen and (min-width:992px){
video#myvideo { object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;  height:100%;}
}

/* Cookie Policy */

.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    display: none;
}

/* Blog */

a.more-link { display:none; }
nav.navigation.post-navigation { display:none; }

.entry-content p img { margin: 2rem 0 1rem 0;}

figure { margin: 0 0 2rem;}

footer.entry-footer.default-max-width { display: none;}
p.entry-date {  background: #f6f4f1; padding: 0.5rem; width: fit-content; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; color:#032f4f;}

.post-thumbnail img {  width: 100% !important; display: block;max-width: 100% !important;}

.single-post .blog-title { position: relative;  z-index: 3;  font-size: 2rem;  line-height: 1;  color: #5a4e44;  font-family: "PT Serif", serif;  text-transform: none;  letter-spacing: 0;}

/* Buttons */
.image-button { display:flex; flex-direction:column; align-items:center; justify-content:end; background-size:cover; width:100%; position:relative; height:75vh; padding-bottom:3rem; }
.image-button:after { content:""; display:block; background:rgb(39 39 39 / 10%); width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; }
.service-button {background:url(/wp-content/uploads/2026/02/by-two-studio-work-with-us.jpg) 50% 50% no-repeat;background-size: cover;}
.portfolio-button {background:url(/wp-content/uploads/2026/02/the-luxe-home-14.jpg) 50% 50% no-repeat; background-size: cover;}
.designguides-button {background:url(/wp-content/uploads/2026/02/the-timeless-home-19.jpg) 50% 50% no-repeat;background-size: cover; }
.timeless-button {background:url(/wp-content/uploads/2026/02/HENDONLONDON-THE-REFINED-HOME.jpg) 50% 50% no-repeat; background-size: cover;}
.contemporary-button {background:url(/wp-content/uploads/2026/02/HARPENDEN-HERTFORDSHIRE-THE-GATHERING-ROOM.jpg) 50% 50% no-repeat;background-size: cover; }
.family-button {background:url(/wp-content/uploads/2026/02/ST-ALBANS-HERTFORDSHIRE-THE-LUXE-HOME.jpg) 50% 50% no-repeat;background-size: cover; }

.project-title { position:relative; z-index:3; color:#fcf8f2; margin-bottom:0.5rem; text-transform: uppercase; text-align:center; font-family: 'Inter', sans-serif; font-weight:300; font-size: 15px; letter-spacing: 1px;}
.button-title { position:relative; z-index:3; color:#fcf8f2; font-size:26px; text-align:center; line-height:1; }

.category-title { position:relative; z-index:3; margin-bottom:0.5rem; text-transform: uppercase; color:#5a4e44; font-family: 'Inter', sans-serif; font-weight:300; font-size: 13px; letter-spacing: 1px;}
.blog-title { position:relative; z-index:3;  font-size:20px; line-height:1.1; color:#5a4e44; letter-spacing:0.2px;}

a .image-button, a .image-button-about {position:relative;}
.image-button::before {position: absolute;  content: "";  background: linear-gradient(0deg, #00000045, transparent);  height: 100%;  width: 100%;  top: 0;  left: 0;  opacity: 1; transition: opacity 0.5s cubic-bezier(0.75, 0.03, 0.32, 0.98);  pointer-events: none;}
.image-button::after {  position: absolute;  content: "";  background: linear-gradient(0deg, #00000073, transparent);  height: 100%;  width: 100%;  top: 0;  left: 0;  opacity: 0;  transition: opacity 0.5s cubic-bezier(0.75, 0.03, 0.32, 0.98); pointer-events: none;}
.image-button-about::after {  position: absolute;  content: "";  background: linear-gradient(0deg, #00000030, transparent);  height: 100%;  width: 100%;  top: 0;  left: 0;  opacity: 0;  transition: opacity 0.5s cubic-bezier(0.75, 0.03, 0.32, 0.98); pointer-events: none;}
.image-button-about:hover::after, .image-button:hover:after {  opacity: 1;}

/* Cookies */

.cookieadmin_re_consent { background: #B5C0AC; right: 15px !important;  left: auto;}

/* Slider */

blockquote { padding: 0;  font-style: normal; }
.author { font-family: "Gilda Display", serif; font-size: 16px; font-weight: 400; }

.hero .hero-slider .slick-slide { padding: 0px;}
.slick-slide { padding: 0px 1.5rem;}

.blog-slick-slider .slick-slide {  padding: 0 12px;}

/* Form */

input::placeholder, textarea::placeholder {font-family:'Inter', sans-serif; font-weight:300; text-transform:uppercase; color:#847e6a!important; font-size:14px;}
input, button, textarea { font-family:'Inter', sans-serif; font-weight:400; text-transform:initial; font-size:1rem;}

.comments-area {  display: none;}

.label-text {font-family:'Inter', sans-serif; font-weight:300; text-transform:uppercase; color:#847e6a!important; font-size:14px;}

/* Portfolio */

.portfolio-img img { object-fit: cover; width: 100%; height: 500px; position: relative;}

.row-cols-5>* {  flex: 0 0 auto;  width: 100%;}

@media screen and (min-width:768px){
	.row-cols-5>* {  flex: 0 0 auto; width: 50%; }
}

@media screen and (min-width:992px){
	.row-cols-5>* {  flex: 0 0 auto; width: 33%; }
}

@media screen and (min-width:1200px){
	.row-cols-5>* {  flex: 0 0 auto; width: 20%; }
}

/* Portrait and Landscape images together */

.equal-img  img {  width: 100%;  height: auto;  object-fit: cover;}

@media screen and (min-width:992px) {
.equal-img img {  width: 100%;  height: 600px;  object-fit: cover;}
}

.image-button .button-title {
  position: relative;
  display: inline-block;
}

/* underline element */
.image-button .button-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px; /* adjust spacing under text */
  width: 50%;
  height: 0.5px;
  background: currentColor;

  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* hover effect */
.image-button:hover .button-title::after {
  transform: translateX(-50%) scaleX(1);
}