/* site wide */

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:ital,wght@0,1..1000;1,1..1000&family=Sofia+Sans:wght@1..1000&display=swap');

[data-bs-theme="dark"] {
    --bs-tertiary-bg-rgb: 0,0,0;
}
:root {
    body {
        --bs-body-bg: #FFFFFFCC;
    }
}
.navbar {
    --bs-navbar-nav-link-padding-x: 1rem;
}
.debugInfo {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #273a72;

    a {
        color: #0a58ca;
        &:hover {
            text-decoration: none;
        }
    }
}

 

a.btn.animatedButton {
    overflow: hidden;
    position: relative;
    margin: 0px auto;
    border: 1px solid white;
    padding: 10px;
    color: white;
    border-radius: 0px;
    
    span {
        z-index: 20;
    }
    
    &:after {
        background: #fff;
        content: "";
        height: 155px;
        left: -75px;
        opacity: .2;
        position: absolute;
        top: -50px;
        transform: rotate(35deg);
        transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
        width: 50px;
        z-index: -10;
    }
    &:hover {
        &:after {
            left: 120%;
            transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
        }
    }
} 

dialog#cookieDialog {
    position: fixed;
    bottom: 24px;
    right: 0px;
    z-index: 9999;

    background-color: #96cefb;

    border-radius: 15px;
    border: none;

    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px 0px;
    margin: 24px;
    margin-left: auto;
    margin-top: auto;

    div.cookieDialogContents {
        color: black;
        width: 350px;
    

        div.popup-header {
            font-size: 32px;
            font-weight: 500;
            font-family: "Sofia Sans Semi Condensed", Arial, Helvetica, sans-serif;
            svg {
                width: 40px;
                height: 40px;
                fill: black;
            }
            div.popup-header-content-container {
                display: flex;
                flex-direction: row;
                gap: 5px;
                align-items: center;
                p {
                    margin-bottom: 0px;
                }
            }
        }
    }
}

div.page-container {
    position: relative;
    background-color: var(--bs-body-bg);
    overflow: hidden; /* hacky */

    @media (min-width: 576px) {
        width: 95%;
        margin: 0px auto;
    }
    @media (min-width: 992px) {
        width: 80%;
    }
    

    h1 {
        margin-top: 1.5em;
        margin-bottom: 1em;
        font-size: calc(32 / 16 * 1rem);
    }
    p {
        margin-bottom: 2rem;
        line-height: 1.8rem;
        a {
            white-space: nowrap;
        }
    }

    nav#siteNavigation {
        position: absolute;
        z-index: 100;
        width: 100%;
        background-color: #FFF;

        mix-blend-mode: normal; /*difference*/

        /* background-color: #050505 !important; */
        @media (min-width: 576px) {
            /* border-radius: 15px 15px 0px 0px; */
        }
        overflow: hidden;


        div.logoAndControls {
            backdrop-filter: blur(4px);
 
            width: 100%; 
            margin-right: auto;
            margin-left: auto;
            display: flex;
            flex-wrap: inherit;
            align-items: center;
            justify-content: space-between;

            div.logo {
                width: 250px;
                min-width:250px;
                overflow: hidden;

                p {
                    margin-bottom: 0px;

                    img {
                        width: 250px;
                        max-width: 250px;
                        mix-blend-mode: darken;
                    }
                } 
            }
        }
        div.navbar-collapse {
            mix-blend-mode: normal !important;
            /* transform: translateZ(0); /* or scale(1)  
            position: relative;
            isolation: isolate;
            z-index: 1; */
            background-color: white;
            backdrop-filter: blur(20px);
            @media (min-width: 576px) {
                background-color: transparent;
                background-blend-mode: color;
                backdrop-filter: blur(24px);
            } 
        }
        
        /* animation for close/open hamburger menu item on mobile */
        button.navbar-toggler{
            border: none !important;
            box-shadow: none !important;

            --transition-delay: 0s;

            &[aria-expanded=false] {
                span {
                    display: block;
                    width: 28px;
                    height: 4px;
                    margin-bottom: 7px;
                    border-radius: 2px;
                    background: #00000080;

                    transition: all 0.2s var(--transition-delay), transform 0.3s var(--transition-delay);


                    &:first-child {
                        position: relative;
                        top: 0;
                    }
                    &:nth-child(2) {
                        opacity: 1;
                    }
                    &:last-child {
                        margin-bottom: 0;
                        position: relative;
                        top: 0;
                    }
                }
            }

            &[aria-expanded=true] {

                span {
                    background: #000000;
                    display: block;
                    width: 28px;
                    height: 4px;
                    margin-bottom: 7px;
                    border-radius: 2px;
                    position: relative;



                    transition: all 0.3s var(--transition-delay), transform 0.3s var(--transition-delay);


                    &:first-child {
                        top: 11px;
                        transform: rotate(-45deg);
                        animation-delay: 2s;
                    }
                    &:nth-child(2) {
                        opacity: 0;
                    }
                    &:last-child {
                        top: -11px;
                        transform: rotate(45deg);
                    }

                }
            }
        }

        div#navbarNav {
            gap: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
            @media (min-width: 992px) {
                margin: 0px;
            }
            ul { 

                li {
                    font-size: 1.2rem;
                    
                    a.nav-link {
                        padding: 0px;
                        
                        margin-right: 0px;
                        margin-bottom: 20px;
                        
                        @media (min-width: 992px) {
                            margin-right: 20px;
                            margin-bottom: 0px;
                        }
                        display: inline-block;
                        border-bottom: 5px solid transparent;

                        &:hover {
                            border-bottom: 5px solid rgba(39, 58, 114, 0.356);
                        }

                        &.active {
                            border-bottom: 5px solid #0a58ca;
                        }
                    }
                }
            }
            div.clientLogin {
                a.btn.animatedButton {
                    overflow: hidden;
                    position: relative;
                    margin: 0px auto;
                    border: 1px solid black;
                    padding: 10px;
                    color: black;
                    border-radius: 0px;

                    span {
                        z-index: 20;
                        white-space: nowrap;
                        text-transform: capitalize;
                    }
                    
                    &:after {
                        background: black;
                        content: "";
                        height: 155px;
                        left: -75px;
                        opacity: .2;
                        position: absolute;
                        top: -50px;
                        transform: rotate(35deg);
                        transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
                        width: 50px;
                        z-index: -10;
                    }
                    &:hover {
                        &:after {
                            left: 120%;
                            transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
                        }
                    }
                }
            }
        }

    }

    div#pageContent {
        /* background-color: #00000044; */
        overflow: hidden;
        @media (min-width: 576px) {
            border-radius: 0px 0px 15px 15px;
        }
        overflow: hidden;
 


    }

    div#footer {

        background: white;
        padding: 20px;
    
        div#serviceStatus {
            p {
                display: flex;
                column-gap: 5px;
                align-items: center;
                text-align: center;
                @media (min-width: 576px) {
                    text-align: left;
                }
                font-size: 12px;

                span {
                    color: green;
                }
            }
        }

        div.legalFooterContent{
            p.copyrightNotice {
                text-align: right; 
                span.legalSymbolic {
                    display: block;
                }
            }
        }

        div.socials {
            display: flex;
            justify-content: flex-end;
            column-gap: 5rem;
            margin-top: 20px;
      
            ul {
                list-style-type: none;
                margin-left: 0px;
                padding-left: 0px;
                display: flex;
                column-gap: 20px;
                margin-bottom: 20px;
                li {
                    background-color: #0a58ca;
                    border-radius: 50%;
        
                    width: 50px;
                    height: 50px;
        
                    &:hover {
                        background-color: white;

                        svg {
                            fill: #0a58ca;
                        }
                    }
        
                    a {
                        display: flex;
                        width: 50px;
                        height: 50px;
                        justify-content: center;
                        align-items: center;
            
                        svg {
                            width: 50%;
                            height: 50%;
                            fill: white;
                        }
                    }
                }
            }
        }

    }



}

#contactPage {
        
        
}

#blogpostContentPage {
    div.postContent {
        figure img {
            width: 100%;
        }
    }
}
 
#homePage {
 

    section {

        div.sectionDivider {
           border-radius: 0px 0px 30px 0px;
           overflow: hidden;
            
        }

        div.sectionContentContainer {
            width: 90%;
            @media (min-width: 576px) {
                width: 65%;
                margin: 0px auto;
            }
            
            margin: 0px auto;
            padding-bottom: 100px;
            &>h2 {
                font-family: "Sofia Sans Semi Condensed", Arial, Helvetica, sans-serif;
                font-weight: 700;
                font-size: 47px;
                padding: 50px 0px;
                text-align: center; 
                color: #212529;
            }
            h3 {
                font-family: "Sofia Sans Semi Condensed", Arial, Helvetica, sans-serif;
                font-weight: 700;
                font-size: 30px;
            }
        }
    }

    section#services {
        background-color: white;
        position: relative;

        @media (min-width: 576px) {
            margin-left: -100px;
            margin-right: -100px;
        }

        div.serviesContainer {
            display: flex;
            flex-direction: column;
            gap: 20px;

            @media (min-width: 992px) {
                flex-direction: row;
            }

            div#droneImage {
                @media (min-width: 992px) {
                    margin-right: -100px;
                }
                img {
                    width: 100%; 
                    @media (min-width: 992px) {
                        width: 200%; 
                        max-width: 800px;
                    }
                }
            }

            div.services {
                /* border: 1px solid red; */
                display: flex;
                flex-direction: row;

             

                &>div.scrolling-wrapper{
                    display: flex;
                    height: fit-content;
                    gap: 20px;
                    @media (max-width: 993px) {
                        overflow-x: auto;
                    }
                    @media (min-width: 993px) {
                        min-width: 520px;
                        width: 520px;
                        flex-wrap: wrap !important;
                    }
                }
                
    
                div.service {
                    flex: 1 0 calc(50% - 20px); /* responsive: two items per row with gap accounted */
                    height: 250px;
                    min-width: 250px;
                    max-width: 250px;
                    max-height: 300px;
                    background-color: #DDD;
                    padding: 10px;
                    border-radius: 10px;

                    @media (min-width: 992px) {
                        box-sizing: border-box;
                    }

    
                    h3 {
    
                    }
                }
            }

        }

        div.sectionDivider {
            position: absolute;
            width: 100%;
            margin-top: -100px;
            z-index: 999;
            svg {
                transform: rotate(180deg);
            }
        }
        
        div.sectionContentContainer {
            position: relative;

            &>h2 {
                text-align: left;
            }
        }

        
       

        div#aiFocus{
            z-index: 20;
            position: relative;
            margin-left: -100px;
            margin-right: -100px;
            margin-bottom: -260px;
            margin-top: 100px;

            background-color: black;
            background-image: url('/static/romforddronephotography/styles/themes/default/images/hero-3-scaled.png');
            background-size: cover;
            background-blend-mode: luminosity;
            display: flex;
            flex-direction: row;

            background-color: black;
            border-radius: 30px;
            overflow: hidden;

            h3, h4, p {
                color: white;
            }

            h3 {
                font-size: 40px;
                @media (min-width: 576px) {
                    font-size: 64px;
                    margin-right: 100px;
                }
                margin-bottom: 65px;
                text-shadow: 1px 1px 2px rgb(0, 0, 0, 0.6);
            }
           

            div.aiFocusContent {
                padding: 30px 30px 100px 100px;
                @media (min-width: 576px) {
                    padding: 120px 100px 100px 100px;
                    width: 80%;
                }
                
                div.solutions {
                    @media (min-width: 576px) {
                        display: flex;
                        flex-direction: row;
                        column-gap: 30px;
                    }
                    


                    div.aiSectionContent {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                    
                        max-width: 260px;
                        h4 {
                            font-size: 24px;
                            margin-bottom: 10px;
                        }
                        p.copy {
                            font-size: 18px;
                        }
                    }
                }

                div.callToAction{
                    margin-bottom: 40px;
                }
            }

            div.aiFocusImage {
                width: 100%;
                background-image: url('/static/romforddronephotography/styles/themes/default/images/waldo2.jpg');
                background-size: cover;
                background-position: center;

            }
        }
    }
    section#prices {
        background-color: #273a72;
        scroll-margin-top: 170px;

        h2 {
            padding-top: 160px;
        }

        h2, p, td {
            color: white;
        }

        table.pricesData {
            thead{
                border-radius: 10px;
                td {
                    font-weight: bold;
                }
            }
            tbody {
                td {
                    color:#212529;
                }
            }
        }

        div.priceMatchGuarantee {
            display: flex;
            flex-direction: row;
            width: fit-content;
            margin: 50px auto;
            align-items: center;
            gap: 20px;

            div.priceMatchGuaranteeStamp {
                svg {
                    height: 80px;
                    width: 80px;
                    @media (min-width: 576px) {
                        width: 100px;
                        height: 100px;
                    }
                }
            }

            p {
                text-align: left;
                margin-bottom: 0px;
            }
        }
    }

    section#faq {
        div.startCardFAQ {
            @media (min-width: 576px) {
                margin-left: -20px;
                margin-right: -20px;
            }
        }
    }

    section#contact {
        div.sectionContentContainer{
            &>p{
                text-align: center; 
            }
            div.contactForm {
                @media (min-width: 576px) {
                    width: 65%;
                }
                margin: 0px auto;
                
                div.row {
                    label {
                        margin-top: 10px;
                        margin-bottom: 2px;
                    }
                }

                textarea {
                    min-height: 250px;
                }
                
                div.col.submitForm {
                    padding-top: 20px;
                }
            }
        }
    }

    section#gallery { 
        
        .sectionContentContainer{
            @media (min-width: 576px) {
                width: 100%;
            }
            @media (min-width: 1400px) {
                width: 90%;
            }
            &>p {
               text-align: center;
            }
        }

        .tz-gallery { 
            padding: 40px;

            .row>div {
                padding: 2px;
            }

            a.lightbox {
                overflow: hidden;
                position: relative;
                display: block;

                img {
                    width: 100%;
                    border-radius: 0;
                    position: relative;
                }
                &:before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -13px;
                    margin-left: -13px;
                    opacity: 0;
                    color: #fff;
                    font-size: 26px;
                    font-family: 'Glyphicons Halflings';
                    content: '\F52A';
                    pointer-events: none;
                    z-index: 9000;
                    transition: 0.4s;
                }
                &:after {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    background-color: #0a58caaa;
                    content: '';
                    transition: 0.4s;
                }

            } 
    

            .lightbox:hover:after,
            .lightbox:hover:before {
                opacity: 1;
            }
        }

        .baguetteBox-button {
            background-color: transparent !important;
        }
    }
}




#servicesPage {
    div.servicesList {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
        gap: 10px; 
        div.service {
            box-sizing: border-box; /* Includes padding and border in the width */
            height: 240px;
            background-color: #00000033;
            position: relative;

            h2 {
                font-size: 1rem;
            }
        }
    }
}


div#videoHero{
    position: relative;
    overflow: hidden;

    div.heroBlur {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(5px) ;
    }


    div.title {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000000CC;
        color: white;
        z-index: 20;

        &>h1, &>p {
            text-align: center;
        }

        h1 {
            text-transform: capitalize;
            font-size: 30px;
            @media (min-width: 576px) {
                font-size: 46px;
            }
            margin: 0px 40px;
            margin-top: 300px;
            font-family: "Sofia Sans Semi Condensed", Arial, Helvetica, sans-serif;
        }
        p{
            margin: 20px 40px;

            span {
                white-space: nowrap;
            }
        }


        div.callToAction {
            display: flex;
            justify-content: center; /* horizontal centering */
            align-items: center;     /* vertical centering */

            a {
                display: inline-block;
                border: 1px solid white;
                padding: 10px;
                color: white;
                border-radius: 0px;
            }

        }
    }

    div#video-container {
        position: relative;
        width: 100%; 
        object-fit: cover;
        overflow: hidden;
        height: 800px;
        
        
        .video-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.5s ease;
            
            &.hidden {
                opacity: 0;
                z-index: 0;
            }
            &.active {
                opacity: 1;
                z-index: 1;
            }
        }
        
    }
    
}

 
body[data-bs-theme="dark"] {
    div.trustpilot-widget-theme-dark {
        color-scheme: light;
    }
}

div.hypeQuote {

    display: flex;
    flex-direction: row;
    column-gap: 10px;
    @media (min-width: 576px) {
        column-gap: 40px;
    }
    margin: 100px 0px;

    div.hypeQuoteStat {
        height: fit-content;

        background-color: #2f5b6e;
        color: white;

        padding: 5px;
        @media (min-width: 576px) {
            padding: 20px;
        }        

        div.popoutStat {
            display: flex;
            flex-direction: column;
            row-gap: 5px;
            justify-content: flex-start; /* Align items to the top */
            text-align: center;
            font-family: "Sofia Sans Semi Condensed", Arial, Helvetica, sans-serif;

            span.measure {
                font-size: 40px;
                line-height: 40px;
                @media (min-width: 576px) {
                    font-size: 80px;
                    line-height: 80px;
                }
                font-weight:900;

                span.measureUnit {
                    line-height: 1;
                    font-size: 16px;
                    @media (min-width: 576px) {
                        font-size: 30px;
                    }
                    vertical-align: top;
                }
            }
        }
        
    }
    figure {
        border-left: 4px solid #2f5b6e;
        padding: 5px 0px 5px 15px;
        @media (min-width: 576px) {
            padding: 5px 0px 5px 20px;
        }
        margin-block-end: auto;

        blockquote {
            margin-bottom: 2em;
            strong {
                white-space: nowrap;
            }
        }
        figcaption {
            text-align: right;
            margin-bottom: 0px;
            cite {
                @media (min-width: 576px) {
                    white-space: nowrap;
                }
                margin-right: 5px;
                &::after {
                    content: "/";
                    margin-left: 5px;
                }
                &:last-child{
                    &::after{
                        content: unset;
                    }
                }
            }
        }
    }
}

/* animations for section */

html.jsEnabled {

    section {
        div.sectionContentContainer  {

            opacity: 0;
            transform: translateY(20px);
            animation: none; /* Cancel fallback animation */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            
            &.visible {
                opacity: 1;
                transform: translateY(0);
            }
        }
        &.visible div.sectionContentContainer {
            opacity: 1;
            transform: translateY(0);
        }
    } 
} 



div#loginPage {
    background-color: #000000;
    position: relative;

    label {
        color: white;
        font-weight: bold;
        margin-top: 5px;
    }
  
    div.pageStageWrapper {
      background: url("/static/images/site/tiled2.webp");
      /* Tile the image */
      background-repeat: repeat;
  
      background-color: #030303;
      background-blend-mode: multiply;
    }
  
    div.pageStage {
      padding-inline-start: 1rem;
      padding-inline-end: 1rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
  
      @media (min-width: 576px) {
        padding-inline-start: 3rem;
        padding-inline-end: 3rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      @media (min-width: 992px) {
        padding-inline-start: 5rem;
        padding-inline-end: 5rem;
        padding-top: 5rem;
        padding-bottom: 5rem;
      }
  
      min-height: 100dvh;
  
      display: flex;
      position: relative;
  
      div.pageContentWrapper {
        display: flex;
        flex-direction: column;
  
        @media (min-width: 992px) {
          flex-direction: row;
        }
  
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
  
        /* layout flow */
        div#pageContent {
          order: 2;
          flex-grow: 1;
          @media (min-width: 992px) {
            order: 1;
          }
        }
        div.previewImage {
          order: 1;
          @media (min-width: 992px) {
            order: 2;
          }
        }
  
        div#pageContent {
          @media (min-width: 576px) {
            min-width: calc(1rem * 26.25);
          }
  
          background-color: #130b24;
          padding: 1rem;
          @media (min-width: 992px) {
            padding: 3.5rem;
          }
  
          display: flex;
          flex-direction: column;
          height: auto;
          position: relative; /* Ensure the content stays on top */
          z-index: 1; /* Bring the content in front */
          overflow: hidden;
  
          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 512px;
            height: 512px;
            z-index: -1; /* Push background behind content */
            /* background: conic-gradient(
              from 0deg,
              #08f,
              #f60,
              #bbffa1,
              #4c00ff,
              #ab2666,
              #09f
            ); */
            background: conic-gradient(from 0deg, #212529, #0a58ca, #0a58ca);
            background-blend-mode: multiply;
            /* animation: ColorBlobsSpin 60s linear infinite; */
            border-radius: inherit; /* Inherit border-radius from parent if needed */
          }
  
          /* The blur layer */
          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1; /* Place it between the background and content */
            backdrop-filter: blur(100px); /* Apply the blur */
            border-radius: inherit; /* Inherit the parent's border-radius */
          }
  
          div.oauthLogins {
            display: flex;
            flex-direction: column;
            row-gap: 10px;
          }
  
          button#login {
            margin-top: 20px;
          }

          h1 {
            font-family: "Sofia Sans Semi Condensed", Arial, Helvetica, sans-serif;
            color: white;

            &+p {
                color: white;
            }
          }
        }
  
        div.previewImage {
          min-height: 300px;
          position: relative;
          justify-content: flex-end;
          display: inline-flex;
          align-items: flex-end;
          width: 100%;
        }
        div#pageForm {
          background-color: #00000066;
          padding: 10px;
          border-radius: 5px;
          margin-top: 50px;
          div.alert {
            h4 {
              font-size: 16px;
            }
          }
        }
      }
      div.inviteCode {
        margin: 50px 0px;
      }
      div.legal {
        position: absolute;
        bottom: 0px;
        display: flex;
        flex-direction: row;
        column-gap: 20px;
      }
    }
  }