/*
 * Avijit Dey Photography
 * Custom CSS
 */

/* ==========================================================================
   01. CUSTOM AUTOFOCUS CURSOR
   ========================================================================== */

@media (hover: hover) and (pointer: fine){

body{
    cursor:none;
}

.adp-cursor{
    width:8px;
    height:8px;
    background:#FF6A00;
    border-radius:50%;
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    z-index:999999;
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity .20s ease;

}

.adp-cursor-focus{
    width:52px;
    height:52px;
    position:fixed;
    left:0;
    top:0;
    transform:translate(-50%,-50%);
    background:url('../images/autofocus.svg') center center no-repeat;
    background-size:contain;
    pointer-events:none;
    z-index:999998;
    opacity:0;
    transition:
        transform .25s ease,
        opacity .20s ease,
        filter .25s ease;
}

.adp-cursor-visible{
    opacity:1;
}

.adp-cursor-hover{
    transform:
        translate(-50%,-50%)
        scale(.78);

    filter:
        brightness(0)
        invert(1);
}

.adp-cursor-hide{
    opacity:0;
}
}


/* ==========================================================================
   02. CAMERA VIEWFINDER HUD
   ========================================================================== */

/* ==========================================================
   02.01 HUD CONTAINER
========================================================== */
#adp-camera-hud{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9000;
    opacity:0.8;
}


/* ==========================================================
   02.02 CAMERA CORNERS
========================================================== */
.adp-hud-corner{
    position:absolute;
    width:70px;
    height:70px;
}

.adp-hud-corner::before,
.adp-hud-corner::after{
    content:"";
    position:absolute;
    background:rgba(255,255,255,.85);
}

/* ---------- TOP LEFT ---------- */
#adp-corner-tl{
    top:4vw;
    left:4vw;
}

#adp-corner-tl::before{
    width:70px;
    height:2px;
    top:0;
    left:0;
}

#adp-corner-tl::after{
    width:2px;
    height:70px;
    top:0;
    left:0;
}


/* ---------- TOP RIGHT ---------- */
#adp-corner-tr{
    top:4vw;
    right:4vw;
}

#adp-corner-tr::before{
    width:70px;
    height:2px;
    top:0;
    right:0;
}

#adp-corner-tr::after{
    width:2px;
    height:70px;
    top:0;
    right:0;
}


/* ---------- BOTTOM LEFT ---------- */
#adp-corner-bl{
    bottom:4vw;
    left:4vw;
}

#adp-corner-bl::before{
    width:70px;
    height:2px;
    bottom:0;
    left:0;
}

#adp-corner-bl::after{
    width:2px;
    height:70px;
    bottom:0;
    left:0;
}


/* ---------- BOTTOM RIGHT ---------- */
#adp-corner-br{
    bottom:4vw;
    right:4vw;
}

#adp-corner-br::before{
    width:70px;
    height:2px;
    bottom:0;
    right:0;
}

#adp-corner-br::after{
    width:2px;
    height:70px;
    bottom:0;
    right:0;
}


/* ==========================================================
   02.03 GRID
========================================================== */
#adp-grid{
    position:absolute;
    inset:6vh 6vw;
}

.adp-grid-v,
.adp-grid-h{
    position:absolute;
    background:rgba(255,255,255,0.1);
}

/* Vertical */
#adp-grid-v1{
    left:33.333%;
    width:1px;
    height:100%;
}

#adp-grid-v2{
    left:66.666%;
    width:1px;
    height:100%;
}

/* Horizontal */
#adp-grid-h1{
    top:33.333%;
    width:100%;
    height:1px;
}

#adp-grid-h2{
    top:66.666%;
    width:100%;
    height:1px;
}

/* ==========================================================
   02.03.01 GRID INTERSECTION MARKERS
========================================================== */
.adp-grid-cross{
    position:absolute;
    width:10px;
    height:10px;
    transform:translate(-50%,-50%);
}

.adp-grid-cross::before,
.adp-grid-cross::after{
    content:"";
    position:absolute;
    background:rgba(255,255,255,.25);
}

/* Horizontal */
.adp-grid-cross::before{
    width:10px;
    height:1px;
    top:50%;
    left:0;
    transform:translateY(-50%);
}

/* Vertical */
.adp-grid-cross::after{
    width:1px;
    height:10px;
    left:50%;
    top:0;
    transform:translateX(-50%);

}

/* Positions */
#adp-cross-1{
    left:33.333%;
    top:33.333%;
}

#adp-cross-2{
    left:66.666%;
    top:33.333%;
}

#adp-cross-3{
    left:33.333%;
    top:66.666%;
}

#adp-cross-4{
    left:66.666%;
    top:66.666%;
}

/* ==========================================================
   02.04 CAMERA LABELS
========================================================== */
.adp-hud-info{
    position:absolute;
    display:flex;
    align-items:center;
    gap:18px;
    font-family:var(--e-global-typography-secondary-font-family);
    font-size:11px;
    font-weight:400;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,.75);
}

/* REC */
#adp-info-rec{
    top:6vw;
    left:9vw;
}


/* ISO */
#adp-info-iso{
    top:6vw;
    right:9vw;
}


/* BAT */
#adp-info-battery{
    bottom:6vw;
    left:9vw;
}


/* APERTURE */
#adp-info-aperture{
    bottom:6vw;
    right:9vw;
}


/* ==========================================================
   02.05 REC DOT
========================================================== */
#adp-rec-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#FF6A00;
    box-shadow:
        0 0 12px rgba(255,106,0,.7);

}


/* ==========================================================
   02.06 BATTERY
========================================================== */
#adp-battery{
    position:relative;
    display:flex;
    gap:4px;
    align-items:center;
    padding:4px;
    border:2px solid rgba(255,255,255,.25);
    border-radius:3px;
}

#adp-battery::after{
    content:"";
    position:absolute;
    right:-6px;
    width:3px;
    height:6px;
    background:rgba(255,255,255,.45);
    border-radius:1px;
}

#adp-battery span{
    width:4px;
    height:8px;
    background:rgba(255,255,255,.45);
}

/* ==========================================================
   02.07 REC PULSE
========================================================== */
@keyframes adpRecPulse{

    0%{
        opacity:.45;
        transform:scale(.92);
    }

    50%{
        opacity:1;
        transform:scale(1);
    }

    100%{
        opacity:.45;
        transform:scale(.92);
    }
}

#adp-rec-dot{
    animation:adpRecPulse 3s ease-in-out infinite;
}

/* ==========================================================================
   03. NAVIGATION TOOLTIP
========================================================================== */

#adp-nav-tooltip{
    position:fixed;
    left:0;
    top:0;
    padding:5px 12px;
    border-radius:6px;
    background:#404042;
    color:#fff;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-family:var(--e-global-typography-secondary-font-family);
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateX(20px);
    transition:
        opacity .2s ease,
        transform .2s ease;
    z-index:99999;
}

#adp-nav-tooltip.active{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}

#adp-nav-tooltip::after{
    content:"";
    position:absolute;
    right:-2px;
    top:50%;
    width:8px;
    height:8px;
    background:#404042;
    transform:translateY(-50%) rotate(45deg);
}

/* ==========================================================================
   04. CUSTOM SCROLLBAR
   ========================================================================== */
/* Firefox */

html{
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.28) #1B1B1B;
}


/* Chrome, Edge & Safari */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#1B1B1B;
}

::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.22);
    border:2px solid #1B1B1B;
    border-radius:100px;
    transition:background .25s ease;
}

::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.45);
}

::-webkit-scrollbar-thumb:active{
    background:#FE6B02;
}

::-webkit-scrollbar-corner{
    background:#1B1B1B;
}

/* ==========================================================================
   05. ACTIVE NAVIGATION
   ========================================================================== */

.adp-nav-icon a{
    transition:color .3s ease;
}

.adp-nav-icon a.adp-nav-active{
    color:#FE6B02 !important;
}

.adp-nav-icon a.adp-nav-active svg{
    fill:currentColor;
}

/* ==========================================================================
   06. BRACKET HEADING
   ========================================================================== */

.adp-bracket-heading .elementor-heading-title{
    position:relative;

}

.adp-bracket-heading .elementor-heading-title::before{
    content:"[";
    margin-right:.25em;
    color:#FE6B02;
}

.adp-bracket-heading .elementor-heading-title::after{
    content:"]";
    margin-left:.25em;
    color:#FE6B02;
}

/* ==========================================================================
   07. HIGHLIGHTED HEADING
   ========================================================================== */

.adp-highlight-heading span{
    color:var(--e-global-color-primary);
}

/* ==========================================================================
   08. IMAGE FRAME / CONTAINER FRAME /
   ========================================================================== */
/* ORANGE */
.adp-orange-frame{
    --corner-size:30px;
    --corner-hover-size:45px;
    position:relative;
}

.adp-orange-frame::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left top/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left top/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right top/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right top/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left bottom/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left bottom/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right bottom/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right bottom/1px var(--corner-size) no-repeat;

    transition:.35s ease;
}

.adp-orange-frame:hover{
    --corner-size:var(--corner-hover-size);
}

/* WHITE */
.adp-white-frame{
	--corner-size:30px;
    --corner-hover-size:45px;
    position:relative;
    overflow:hidden;
}

.adp-white-frame::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:10;
    
    background:
        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) left top/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) left top/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) right top/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) right top/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) left bottom/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) left bottom/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) right bottom/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-text),var(--e-global-color-text)) right bottom/1px var(--corner-size) no-repeat;
	
	transition:background-size .35s ease;

}

.adp-white-frame:hover{
    --corner-size:var(--corner-hover-size);
}

/*SMALL FRAMES*/
.adp-hover-card-small{
    --corner-size:20px;
    --corner-hover-size:30px;
}

/* ==========================================================================
   09. SERVICES CARD HOVER
   ========================================================================== */

/* Heading color on hover*/
.services-card .elementor-heading-title{
    transition:color .4s ease;
}

.services-card:hover .card-number.elementor-widget-heading .elementor-heading-title{
    color:var(--e-global-color-b364434);
}
.services-card:hover .card-heading.elementor-widget-heading .elementor-heading-title{
    color:var(--e-global-color-b364434);
}
.services-card:hover .card-text.elementor-widget-heading .elementor-heading-title{
    color:var(--e-global-color-b364434);
}

/* ==========================================================================
   10. PORTFOLIO / IMAGE HOVER OVERLAY 
   ========================================================================== */

/* Parent */
.adp-hover-card{
	position:relative;
    overflow:hidden;
}

/** Overlay **/
.adp-hover-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:rgba(0,0,0,.55);
    opacity:0;
    transition:opacity .35s ease;
    z-index:5;
}

/* Hover */
.adp-hover-card:hover .adp-hover-overlay{
    opacity:1;
}

/* ==========================================================================
   11. FORM + FORM FIELD CORNER
   ========================================================================== */
/* Form Field Corners */

[id^="form-field-"]{
    --corner-size:15px;
    --corner-hover-size:25px;

    background:
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left top/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left top/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right top/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right top/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left bottom/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) left bottom/1px var(--corner-size) no-repeat,

        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right bottom/var(--corner-size) 1px no-repeat,
        linear-gradient(var(--e-global-color-primary),var(--e-global-color-primary)) right bottom/1px var(--corner-size) no-repeat;

    transition:background-size .35s ease;
}

[id^="form-field-"]:hover,
[id^="form-field-"]:focus{
    --corner-size:var(--corner-hover-size);
}

/*Dropdown option Backgorund*/
#form-field-project option{
    background:var(--e-global-color-secondary);
}

/*Message Counter*/
#message-counter {
    font-size: 12px;
	color: var(--e-global-color-14f451c);
    position: absolute;
    display: flex;
    right: 12px;
    bottom: 4px;
}

/* ==========================================================================
   12. ELEMENTOR LIGHTBOX TITEL
   ========================================================================== */
.elementor-slideshow__title {
    font-size: 16px;
    font-weight: 400 !important;
    font-family: 'Space Mono';
    text-transform: uppercase;
}