/* 
Theme Name: Azizi Law
Description: Custom Theme for Azizi Law
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: azizi-law
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* Add your custom styles here */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');






@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Outfit:wght@100..900&display=swap');

/* #site-header {
    display: none;
} */
:root {

	--white: 0, 0%, 100%;
	--off-white: 0, 0%, 96%;
	--black: 0, 0%, 7%;
	
    --gray-50: 0, 0%, 97%;
    --gray-100: 0, 0%, 95%;
    --gray-200: 0, 0%, 88%;
    --gray-300: 0, 0%, 80%;
    --gray-400: 0, 0%, 60%;
    --gray-500: 0, 0%, 40%;
    --gray-900: 0, 0%, 9%;
    
    --accent-50:  40, 65%, 94%;
    --accent-100: 40, 55%, 85%;
    --accent-200: 40, 45%, 70%;
    --accent-500: 39, 63%, 46%;
    --accent-700: 35, 75%, 30%;
    --accent-800: 32, 80%, 20%;
    --accent-900: 30, 85%, 12%;
    
    /* BLUE */
    --primary-50:  210, 35%, 94%;
    --primary-100: 210, 28%, 85%;
    --primary-200: 210, 26%, 70%;
    --primary-500: 212, 45%, 32%;
    --primary-700: 214, 55%, 18%;
    --primary-800: 215, 55%, 15%;
    --primary-900: 216, 45%, 11%;

	--fs-base: 16px;
	--fs-h6: var(--fs-base);
	--fs-h5: calc(var(--fs-h6) * 1.25);
	--fs-h4: calc(var(--fs-h5) * 1.25);
	--fs-h3: calc(var(--fs-h4) * 1.25);
	--fs-h2: calc(var(--fs-h3) * 1.25);
	--fs-h1: calc(var(--fs-h2) * 1.25);
	
	--heading-font-weight: 600;
}

body {
    font-family: Outfit;
    font-size: 18px;
}

a {
    color: hsl(var(--accent-500));
}

.page-section {
    padding-block: 3rem;
}

.container {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
}

#hero {
    justify-content: center;
    
    & .hero-heading {
        font-size: clamp(5rem, 10vw,10rem);
        text-transform: uppercase;
        letter-spacing: -0.03em;
        font-weight: 500;
        color: hsl(var(--white));
    }
    & .hero-subheading {
        font-size: clamp(2rem, 5vw,4rem);
        text-transform: uppercase;
        letter-spacing: -0.03em;
        font-weight: 500;
        color: hsl(var(--primary-500));
    }
}

#parent-hero {
    justify-content: center;
    padding: 4rem;
    
    & .hero-content {
       gap: 2rem;
    }
    
    & .parent-hero-heading {
        font-size: clamp(4rem, 6vw,6rem);
        text-transform: uppercase;
        text-align: center;
        letter-spacing: -0.03em;
        font-weight: 500;
        color: hsl(var(--white));
    }
    & .parent-hero-subheading {
        /*font-size: clamp(2rem, 5vw,4rem);*/
        /*text-transform: uppercase;*/
        /*letter-spacing: -0.03em;*/
        /*font-weight: 500;*/
        text-align: center;
        color: hsl(var(--white));
        & a {
            color: hsl(var(--white));
            text-decoration: underline;
        }
    }
    
    & video {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover;
    }
    
    & .parent-hero-button {
        align-self: center;
    }
}

.intro-section-image {
        width: 100%;
        
        overflow: hidden;
        & img {
        width: 100% !important;
        height: 100% !important;
        max-height: 500px;
        object-fit: cover !important;
        object-position:;
        }
        /*border: 5px solid hsl(var(--accent-500));*/
    }

.parent-intro-section {
    background-color: hsl(var(--accent-50));
    padding: 2rem;
    & .intro-section-image {
        width: 100%;
        
        overflow: hidden;
        & img {
        width: 100% !important;
        height: 100% !important;
        max-height: 500px;
        object-fit: cover !important;
        object-position:;
        }
        border: 5px solid hsl(var(--accent-500));
    }
}

.parent-content-section-text {
    & h4 {
        color: hsl(var(--primary-500));
    }
    
    & h5 {
        color: hsl(var(--accent-500));
    }
}

#page-content h2 {
    font-weight: 700;
    letter-spacing: -0.25px;
}

#core-values {
    align-items: center;
    & .core-values-heading {
        text-align: center;
        font-size: var(--fs-h1);
        text-transform: uppercase;
        letter-spacing: -2px;
        font-weight: 500;
    }

    & .core-values-grid {
        margin-top: 3rem;
    }
    
    & .core-values-item {
        gap: 0 !important;
        /*padding: clamp(2rem, 10%, 4rem);*/
        /*padding: 2rem;*/
        padding-top: 60px;
        max-width: 350px;
        align-items: center !important;
        /*padding: 75px 25px 70px;*/
        &:hover:before {
            content: "";
            height: 100%;
            width: 100%;
            background: url(/wp-content/uploads/2026/01/core-values-shield-hover.png);
            background-position: center;
            background-size: 100%;
            background-repeat: no-repeat;
        }
    }
    
    & .core-values-item-heading {
        text-transform: uppercase;
        text-align: center;
        font-size: var(--fs-h3);
        font-weight: 500;
        margin-top: 1rem;
		padding-block: 1rem;
    }
    
    & .core-values-item-text {
        text-align: center;
        /*flex-grow: 1 !important;*/
        min-height: 200px;
		text-wrap: balance;
        & p {
        font-size: clamp(12px, 4vw, 16px);
        }
    }
    
    & .core-values-shield {
        position: absolute;
        width: 100px;
        top: 0;
        transform: translateY(calc(-50% + 25px));
        /*margin-top: -120px;*/
    }
}

@media (max-width: 1400px) {
    #core-values .core-values-item {
        background-size: cover;
    }
}

#testimonials {
    padding-top: 3rem;
    padding-bottom: 7rem;
    .testimonials-heading {
        font-size: var(--fs-h1);
        text-transform: uppercase;
        letter-spacing: -2px;
        font-weight: 500;
        line-height: 1em;
    }
    
    .testimonial-logo {
        border: 1px solid hsl(var(--accent-500));
        border-radius: 50%;
        aspect-ratio: 1;
        display: flex;
        justify-content: center;
        width: 100px;
        height: 100px;
        background-color: hsl(var(--white)) ;
        align-self: center;
        margin-bottom: -4rem;
        z-index: 1;
        & img {
            width: 50%;
        }
    }
    & .star-rating img {
        height: 1.5rem;
    }
    
    & .testimonial-text {
        text-align: center;
    }
    
    & .testimonial-author {
        text-align: center;
        text-transform: uppercase;
        color: hsl(var(--accent-500));
    }
    
    & .testimonial-card {
        height: 100% !important;
        background-color: hsl(var(--white));
        padding: 4rem;
        box-shadow: 0 0 10px 2px rgba(0,0,0,0.25);
        &:before {
            position: absolute;
            content: url(/wp-content/uploads/2026/01/corner-lines-tl.webp);
            top: 1rem;
            left: 1rem;
        }
        &:after {
            position: absolute;
            content: url(/wp-content/uploads/2026/01/corner-lines-br.webp);
            bottom: 1rem;
            right: 1rem;
        }
    }
    /*& .elementor-swiper .swiper-slide-active {*/
    /*    transform: scale(1.15);*/
    /*    transition: transform 0.3s ease;*/
    /*    z-index: 2;*/
    /*}*/

    /* Keep other slides at normal size */
    /*& .elementor-swiper .swiper-slide {*/
    /*    transition: transform 0.3s ease;*/
    /*}*/
    
    & .testimonials-carousel .elementor-swiper-button {
        & .svg-arrow-bg {
            fill: hsl(var(--accent-500));
        }
        
        &:hover .svg-arrow-bg {
            fill: hsl(var(--primary-500));
        }
    }
    
    & .testimonials-carousel {
        overflow: visible;
        & .swiper-wrapper {
            align-items: center;
        }
        & .swiper {
            /*overflow: visible;*/
        }
        & .swiper-slide-active + .swiper-slide {
            /*transform-origin: center;*/
            /*transform: scale(1.15);*/
            /*z-index: 20;*/
            /*border: 8px solid hsl(var(--accent-500));*/
        }
    }
}

.image-bg-cta {
    padding: 3rem;
    
    & .container {
        /*background-color: rgba(255,255,255,0.3);*/
        border: 3px solid hsl(var(--accent-500));
        padding: 3rem;
    }
}

.image-bg-cta-heading {
    color: hsl(var(--white));
    font-size: var(--fs-h1);
    letter-spacing: -1px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
	line-height: 1.5rem;
    
}

.image-bg-cta-text {
    color: hsl(var(--white));
    text-align: center;
    font-size: var(--fs-h5);
    max-width: 70ch !important;
    text-wrap: balance
    
}

.header-nav {
    & nav ul li {
        height: 125px;

            
        &:hover a {
            background: linear-gradient(
                to bottom,
                hsla(var(--accent-500), 1),
                hsla(var(--accent-500), 0)
            );
        }
        & a {
            color: white !important;
            text-transform: uppercase;
            font-weight: 500 !important;
        }
    }
}

.text-available {
    color: hsl(var(--accent-500));
    font-weight: 500;
}

.text-available-mobile {
    color: hsl(var(--accent-500));
    font-weight: 500;
}


 .text-phone span {
    font-size: var(--fs-h4);
    color: hsl(var(--white));
    font-weight: 500;
    letter-spacing: -0.5px;
}

 .text-phone-mobile span {
    font-size: var(--fs-h4);
    color: hsl(var(--white));
    font-weight: 500;
    letter-spacing: -0.5px;
}

#site-header {
    padding: 0;
    position: fixed;
    z-index: 100;
    align-items: center;
	background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
    gap: 0;
    &:before {
        content:"";
        position: absolute;
        background-color: black;
        top: -100%;
        transition: all 500ms ease;
    }
    
    &.scrolled:before {
        top: 0;
    }
    

    
    & .site-header-grid {
        padding: 0;
        max-width: 95%;
    }
    
    & .site-header-cta {
        display: flex !important;
    }
}




.button {
    margin-top: 1.5rem;
}

.button {
    &.inverse {
        & a:after {
            background-color: hsl(var(--primary-500));
        }
        &:hover a {
            color: hsl(var(--primary-500));
            &:after {
                background-color: hsl(var(--white));
            }
        }
    }
    & a {
        font-size: 22px;
        line-height: 1;
        color: #fff;
        font-weight: 700;
        display: inline-block;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        padding: 25px 25px 24px 35px;
        position: relative;
        z-index: 9;
        background-color: transparent;
        &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-color: hsl(var(--accent-500));
            left: 0;
            top: 0;
            z-index: -1;
            border-radius: 18px;
            transform: skew(-0.05turn, 0deg);
            transition: 0.5s;
        }
    }
    &:hover a:after {
        background-color: hsl(var(--primary-500));
    }
}

@media (max-width: 767px) {
	.button a {
		width: 100% !important;
	}
}





#our-promise {
    padding: 3rem;
    background-color: hsl(var(--accent-500));
    & .our-promise-heading {
        /*text-align: center;*/
        padding-bottom: 0.25rem;
        align-self: flex-start !important;
        color: hsl(var(--white));
        font-size: var(--fs-h1);
        text-transform: uppercase;
        letter-spacing: -2px;
        font-weight: 500;
        border-bottom: 3px solid hsl(var(--white)) ;
    }
    & .our-promise-text {
        color: hsl(var(--white));
    }
}

#award-winning {
    &:before {
        /*content: "";*/
        /*background: url(/wp-content/uploads/2026/01/slanted-bg.png);*/
        /*background-repeat: no-repeat;*/
        /*width: 55%;*/
        /*height: 100%;*/
        /*background-size: contain;*/
		
		/*DESKTOP/TABLET -- mobile is different, defined below*/
		background: url(/wp-content/uploads/2026/01/Triangle-Edge.svg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: calc(50% - 50vw) 0;

    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    height: 100%;

    }
    & .container {
        max-width: 1700px;
    }
    & .award-winning-heading {
        color: hsl(var(--white));
        max-width: 460px;
        font-size: var(--fs-h3);
        font-weight: 500;
        line-height: 1.2em;
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
    
    & .award-winning-image {
        border-radius: 1rem;
        overflow: hidden;
    }
    
    & .award-winning-content {
        padding-top: 2rem;
    }
    
    & .award-winning-content-heading {
        text-transform: uppercase;
        font-size: var(--fs-h1);
        line-height: 1em;
        font-weight: 500;
    }
    
    & .text-available {
        color: hsl(var(--accent-500));
        &:before {
            position: absolute;
            content:"";
            border: 1px solid hsl(var(--accent-500));
            height: 2px !important;
            width: 50px;
            left: -60px;
            top: 50%;
        }
    }
    
    & .text-phone span {
        color: hsl(var(--primary-500));
    }
}

/*MOBILE -- dekstop/tablet above*/
@media (max-width: 767px) {
	#award-winning {
		&:before {
			background: url(/wp-content/uploads/2026/01/Triangle-Edge-Flipped.svg);
			background-repeat: no-repeat;
			background-size: 120% auto;
			background-position: 0 0;
		}
	}
}

#azizi-difference {
    & .azizi-difference-shield {
        position: absolute;
        width: 45%;
        left: 50%;
        top: 0;
        transform: translateX(-50%) translateY(-45%);
    }
    & .azizi-difference-content {
        position: absolute;
        text-align: center;
        /*border: 1px solid red;*/
        left: 0;
        font-weight: 500;
        max-width: 100%;
        padding-inline: 1.5rem;
        display: flex;
        justify-self: center;
        top: 45%;
        padding: 2rem;
        transform: translateY(-50%);
        & span {
            line-height: 1.2em;
        }
    }
    & .azizi-difference-item {
        padding: 0;
    }
    
    & .azizi-difference-heading {
        color: hsl(var(--white));
        font-size: var(--fs-h1);
        font-weight: 500;
        text-transform: uppercase;
        border-left: 8px solid hsl(var(--accent-500));
        padding-left: 1rem;
        padding-block: 1rem;
        margin-left: 1rem;
        margin-bottom: 3rem;
    }
}

#locations {
    /*border: 1px solid;*/
    
    & .locations-heading {
        color: hsl(var(--white));
        font-size: var(--fs-h1);
        font-weight: 500;
        text-transform: uppercase;
        max-width: 800px;
    }
    
    & .locations-content {
        color: hsl(var(--white));
        font-size: 1.25rem;
        text-align: right;
    }
    
    .locations-table {
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    
    & .locations-table-header {
        background-color: hsl(var(--accent-500));
        align-items: center;
        padding-block: 1rem;
    }
    
    & .locations-table-heading {
        color: hsl(var(--white));
        font-size: var(--fs-h1);
        font-weight: 500;
        text-transform: uppercase;
    }
    
    & .locations-table-content {
        background-color: hsl(var(--gray-100));
        padding: 2rem;
    }
    
    & .locations-table-col {
        padding: 0;
        gap: 0.25rem
    }
    
    & .location-item {
        padding: 0;
        gap: 0.5rem;
        align-items: center;
    }
    
    & .location-pin {
        & svg {
            width: 1.25rem;
            & path {
            fill: hsl(var(--accent-500));
            }
        }
    }
    
    & .location-label {
        font-size: var(--fs-h4);
        font-weight: 500;
    }
}

@media (max-width: 767px) {
	.location-label {
        font-size: var(--fs-h5);
    }
}

    .footer-spacer {
        background-color: hsl(var(--gray-100));
    }

#site-footer {

    background-color: hsl(var(--primary-700));
    padding: 0;
    & .form-card {
        background-color: hsl(var(--accent-50));
        padding: 3rem;
        max-width: 1500px;
		box-shadow: -5px 5px 20px rgba(0,0,0,0.25)
    }
    
    & .contact-heading {
        /*text-align: center;*/
        font-size: var(--fs-h1);
        text-transform: uppercase;
        letter-spacing: -2px;
        font-weight: 500;
        line-height: 1em;
    }
    button {
        
        font-size: 22px;
        line-height: 1;
        color: #fff;
        font-weight: 700;
        display: inline-block;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        padding: 25px 25px 24px 35px;
        position: relative;
        z-index: 9;
        background-color: transparent;
        &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-color: hsl(var(--accent-500));
            left: 0;
            top: 0;
            z-index: -1;
            border-radius: 18px;
            transform: skew(-0.05turn, 0deg);
            transition: 0.5s;
        }
        &:hover:after {
            background-color: hsl(var(--primary-500)) !important;
        }
    
    }
    & .contact-map-container {
        
        justify-content: center;
        padding: 0;
    }
    
    & .contact-map {
        border: 5px solid hsl(var(--accent-500));
    }
    
    & .contact-directions-button {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        & a {
            background-color: hsl(var(--primary-700));
            border-radius: 0;
            text-transform: uppercase;
        }
        &:hover a {
            background-color: hsl(var(--accent-500));
        }
    }
    
    & input {
        border-radius: 0;
        border-color: hsl(var(--gray-500));
    }
    & textarea {
        border-radius: 0;
    }
    
    & .footer-nav {
        text-transform: uppercase;
        & li a {
            color: hsl(var(--white));
        }
    }
    
    & .form-card {
        margin-top: -300px;
    }
    
    & .footer-bar {
        background-color: hsl(var(--accent-500));
        padding-block: 1rem;
    }
    
    & .footer-icon {
        
    }
    
    & .footer-address {
        color: hsl(var(--white));
        text-align: center;
    }
    
    & .footer-bar-text {
        color: hsl(var(--white));
        text-align: center;
    }
    
    & .footer-grid {
        padding-block: 2rem;
        border-top: 1px solid hsl(var(--white));
    }
    
    & .footer-col-2 {
        border-inline: 1px solid hsl(var(--gray-300))
    }
}

@media (max-width:767px) {
	 .form-card {
        padding: 1rem !important;
    }
}

@media (max-width:1024px) {
    #video .video-carousel {
        & .swiper-slide-active + .swiper-slide {
            transform-origin: center;
            transform: scale(1);
            z-index: 20;
            border: 8px solid hsl(var(--accent-500));
        }
    }
    #video .video-carousel {
        & .swiper-slide-active {
            transform-origin: center;
            transform: scale(1.15);
            z-index: 20;
            border: 8px solid hsl(var(--accent-500));
        }
    }
}

#videos {
	background: linear-gradient(to top, hsl(var(--gray-100)), hsl(var(--white)));
    &.parent {
        background: linear-gradient(to top, hsl(var(--gray-100)), hsl(var(--white)));
        padding-bottom: 3rem;
        & .videos-heading {
            color: hsl(var(--accent-500));
        }
    }
    & .videos-heading {
        font-size: var(--fs-h1);
        text-transform: uppercase;
        letter-spacing: -2px;
        font-weight: 500;
        line-height: 1em;
        text-align: center;
        margin-bottom: 2rem;
    }
    & .video-carousel {
/*         overflow: visible; */
        & .swiper-wrapper {
            align-items: center;
        }
        & .swiper {
/*             overflow: visible; */
        }
        & .swiper-slide-active + .swiper-slide {
            transform-origin: center;
/*             transform: scale(1.15); */
            z-index: 20;
            border: 8px solid hsl(var(--accent-500));
			transition: border 500ms ease;
        }
    }
    
    & .video-next {
        cursor: pointer;
    }
    
    & .video-prev {
        cursor: pointer;
    }
}

#accolades {
    .accolades-heading {
        font-size: var(--fs-h1);
        text-transform: uppercase;
        letter-spacing: -2px;
        font-weight: 500;
        line-height: 1em;
        text-align: center;
        margin-bottom: 2rem;       
    }
    & .award-tile {
        justify-content: center;
        background-color: hsl(var(--primary-500));
        border: 3px solid hsl(var(--accent-500));
        aspect-ratio: 1;
    }
}


@media (max-width: 767px) {
    #parent-hero {
        padding: 1rem !important;
        & .parent-hero-heading {
            font-size: var(--fs-h2) !important;
        }
        
        & .parent-hero-button a {
            font-size: 1rem ;
            padding: 1.1rem;
        }
    }
    
    .intro-section {
        border:;
    }
}

#parent-accolades {
    background-color: hsl(var(--primary-700));
}

.parent-inline-image {
    width: 100%;
    height: 350px;
    & img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
        
    }
    max-height: 300px;
}

/* INLINE ACCORDION */

.iAccordion {
    border-top: 1px solid #d6d6d6;
}

/* Button reset */
.iAccordion-header {
    all: unset;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    padding: 28px 0;
    cursor: pointer;
    font-weight: 600;

    border-bottom: 1px solid #d6d6d6;
}

/* Prevent site hover styles */
.iAccordion-header:hover,
.iAccordion-header:focus {
    background: none;
    color: inherit;
}

.iAccordion-title {
/*     font-size: 1.75rem; */
    font-weight: 600;
    color: #000;
	line-height: 1.2em;
}

/* Icon container */
.iAccordion-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid hsl(212, 45%, 32%);
    flex-shrink: 0;
    margin-left: 24px;
    background-color: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Chevron */
.iAccordion-icon::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;

    border-right: 2px solid hsl(35, 75%, 30%);
    border-bottom: 2px solid hsl(35, 75%, 30%);

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
    transition: transform 0.3s ease, border-color 0.25s ease;
}

/* Hover fill */
.iAccordion-header:hover .iAccordion-icon {
    background-color: hsl(35, 75%, 30%);
    border-color: hsl(35, 75%, 30%);
}

/* Hover chevron color */
.iAccordion-header:hover .iAccordion-icon::before {
    border-color: #fff;
}

/* Open state */
.iAccordion-header.active .iAccordion-icon {
    background-color: hsl(35, 75%, 30%);
    border-color: hsl(35, 75%, 30%);
}

/* Open chevron always white */
.iAccordion-header.active .iAccordion-icon::before {
    border-color: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Prevent hover from overriding open state */
.iAccordion-header.active:hover .iAccordion-icon::before {
    border-color: #fff;
}

/* Panel animation */
.iAccordion-panel {
    overflow: hidden;
    height: 0;
    transition: height 0.35s ease;
}

.iAccordion-panel > * {
    &:first-child {
        padding-top: 1rem;
    }
    padding-bottom: 0.5rem;
}


.sub-menu {
    background-color: unset !important;
    background-color: rgba(255,255,255,0.75) !important;
	backdrop-filter: blur(3px);
    
    .menu-item {
        border-bottom: 1px solid hsl(var(--gray-500));
        height: unset;
         /*background: transparent !important;*/
        & a {
            color: black !important;
            background: unset !important;
        }
        &:hover a {
            background-color: rgba(255,255,255,1) !important;
        }
    }
}