/**
 * Theme Name: Divi-Child
 * Template:   Divi
 * Author: Mark de la Cruz
 * 
 */


/******front page cinematic view css *****/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=EB+Garamond:ital,wght@1,400&display=swap');

@font-face {
  font-family: 'Northwell';
  src: url('/wp-content/themes/divi-child/fonts/Northwell TSC.ttf') format('truetype');

}




        body {
            margin: 0;
            padding: 0;
            background-color: #fbe8d6;
            font-family: 'Gilroy', sans-serif!important;
			font-weight: 200!important; /* Ultra Light */
            text-align: center;
          
        }

        .hero-container {
            max-width: 1100px;
            margin: 50px auto;
            padding: 20px;
        }

        .video-frame {
            border: 8px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            width: 100%;
            height: 450px;
        }

        .video-frame video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .top-text {  
            display: flex;
            justify-content: space-between;
            font-style: italic;
            font-size: 12px;
            text-transform: lowercase;
			    margin-bottom: 10px;
			font-family: 'Gilroy', sans-serif;
			font-weight: 700; /* Ultra Light */
        }

        .title {
			font-family: 'Linotype', sans-serif;
            font-size: 100px;
            
            letter-spacing: 0.179em;
            margin: 40px 0;
            text-align: center;
            text-indent: 0.179em;
			
        }
        .title-wrapper {
              text-align: center;
        }

        .subtitle {
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 20px;
			font-family: 'Gilroy', sans-serif;
			font-weight: 200; /* Ultra Light */
        }

        .desc {
			display:none;
            font-style: italic;
            font-size: 18px;
            margin-top: 10px;
			font-family: 'Linotype', sans-serif;
        }

.top-text span{
	font-size:1.8em;
}

.text-segment {
  position: relative;
  padding: 0 10px;
  white-space: nowrap;
}

.text-segment.left::after,
.text-segment.middle::before,
.text-segment.middle::after,
.text-segment.right::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%; /* increase width if needed */
  height: 1px;
  background-color: #000;
}

.text-segment.left::after {
  right: -100px;
}

.text-segment.middle::before {
  left: -100%;
}

.text-segment.middle::after {
  right: -100%;
}

.text-segment.right::before {
  left: -100px;
}
.subtitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2em;
	padding:0px 13em;
}

.subtitle .left,
.subtitle .right {
  flex: 1;
}

.subtitle .left {
  text-align: left;
}

.subtitle .right {
  text-align: right;
}


/***** Responsive **/

/***** Responsive **/
@media only screen and (max-width: 1366px) {
	.title-wrapper .title {
		font-size:40px!important;
		text-indent: 1.2em;
	}
	.homepage-video-heading h3 span {
		letter-spacing:3px!important;
		text-indent:3px!important;
	}
}

@media only screen and (max-width: 1024px) {
	.title-wrapper .title {
		font-size:40px!important;
		text-indent: 1.2em;
	}
}

@media only screen and (max-width: 768px) {
	.title-wrapper .title {
		font-size:30px!important;
		text-indent: 1.2em;
	}
}

@media only screen and (max-width: 480px) {
	.title-wrapper .title {
		font-size:16px!important;
	}
}


/******* end responsive *****/

#mainContent {
    /*visibility:hidden;*/
}

#title-content, .visibility {
    visibility:hidden;
}

header {
    opacity:1!important;
}

.transformed-element {
  will-change: transform;
}


/* General container styling */
.wpcf7 form {
  /*background-color: #2c2a22;  Dark background */
  padding: 30px; /* Padding inside the form */
  border-radius: 10px; /* Rounded corners */
  /*color: #f5e2ba;  Text color */
  /*font-family: "Georgia", serif;  Font to match second screenshot */
}

.wpcf7 input[type="text"], .wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%; /* Adjust width to fit two columns */
  padding: 10px;
  border: none; /* Remove default border */
  border-bottom: 2px solid #f5e2ba; /* Add bottom border */
  background-color: transparent; /* Transparent background */
  color: #f5e2ba; /* Text color */
  margin-bottom: 20px; /* Space between fields */
  font-size: 18px; /* Font size */
}

.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 textarea::placeholder {
  color: #f5e2ba; /* Placeholder color */
}

.wpcf7 input[type="radio"] {
  margin-right: 10px; /* Space between radio and label */
}

.wpcf7 label {
  font-size: 16px; /* Label font size */
  font-weight: bold; /* Bold text */
  margin-bottom: 10px; /* Space between label and input */
}

.wpcf7-submit {
  background-color: #f0c96d; /* Button background color */
  color: #2c2a22; /* Text color */
  border: none; /* Remove border */
  padding: 10px 30px; /* Padding for button */
  font-size: 16px;
  /*font-family: "Georgia", serif;  Match font */
  text-transform: uppercase; /* Make text uppercase */
  cursor: pointer; /* Change cursor on hover */
  margin-top: 20px; /* Space at top of button */
  border-radius: 30px; /* Rounded button */
}

.wpcf7-submit:hover {
  background-color: #e5b652; /* Hover effect */
}

/* Styling for the header section */
.wpcf7 h2 {
  /*font-family: "Georgia", serif;  Match font */
  font-size: 36px; /* Larger font size */
  color: #f5e2ba; /* Header text color */
  margin-bottom: 20px;
}

.wpcf7 p {
  
  font-size: 18px;
  color: #f5e2ba; /* Paragraph text color 
  text-align: center;*/
}

.column-half {
  display: inline-block;
  flex: 1;
  margin-right: 20px; /* Add some space between columns */
  width: 48%; /* Adjust width to fit two fields side by side */
  
}

.column-half:nth-child(2n) {
  margin-right: 0; /* Removes margin for the last item in the row */
}


/* Remove the default appearance of the date input */
input[type="date"] {
  appearance: none; /* Remove default styling */
  -webkit-appearance: none; /* Remove webkit styling */
  background: transparent; /* Transparent background to match other fields */
  color: #f5e2ba; /* Match the text color */
  border: none; /* Remove default border */
  border-bottom: 2px solid #f5e2ba; /* Yellow bottom border */
  width: 100%; /* Full width */
  padding: 10px 0; /* Padding to match other fields */
  font-family: "Georgia", serif; /* Font style consistency */
  font-size: 18px; /* Font size consistency */
}

/* Placeholder styling for the date input */
input[type="date"]::placeholder {
  color: #f5e2ba; /* Placeholder color to match the form */
  font-style: italic; /* Optional styling for the placeholder */
}

/* Styling when the input is focused */
input[type="date"]:focus {
  outline: none; /* Remove default focus outline */
  border-bottom: 2px solid #e5b652; /* Change bottom border color on focus */
}

/* Hide the default calendar icon in Chrome */
input[type="date"]::-webkit-calendar-picker-indicator {
  /*display: none;  Optionally hide the native calendar icon */
}

/* Add a custom date icon (optional, for visual consistency) */
input[type="date"]::after {
  content: url('path-to-your-icon.svg'); /* Add a custom icon if needed */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Adjust width and layout for inline design */
.date-wrapper {
  display: flex;
  align-items: center;
  position: relative; /* Allows for positioning of the icon */
}

.date-wrapper input {
  width: 100%; /* Ensure full width of input */
  padding-right: 30px; /* Add space for custom icon (if used) */
}

/* Flexbox for aligning both columns */
.form-row {
  display: flex;
  justify-content: space-between; /* Distribute space evenly */
  align-items: flex-end; /* Align inputs at the bottom */
  margin-bottom: 20px; /* Space below the row */
}

/* Ensure consistency of the input styles */
input[type="text"], input[type="date"] {
  width: 100%; /* Make the input take full width of its container */
  padding: 10px 0; /* Padding inside inputs */
  border: none; /* Remove default borders */
  border-bottom: 2px solid #f5e2ba; /* Bottom border to match design */
  background-color: transparent; /* Keep input background transparent */
  color: #f5e2ba; /* Text color */
  font-size: 18px;
  font-family: "Georgia", serif;
}

.align-date {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    /* position: relative; */
    padding-bottom: 20px;
    /* top: 0; */
}


/* custom wqs */

.et_pb_gutters3 .et_pb_column.zfixm {
    margin-right: 2.425%;
    margin-left: 2.425%;
}