@charset "utf-8";
/* CSS Document */

@font-face{
    font-family:"Vinyl Smooth Bv";
    src:url("fonts/VinylSmoothBv-rRx.ttf") format("truetype");
}
/*==================================================
GLOBULAR RECORDS
FOOTER
PART 4B
==================================================*/
@font-face{
    font-family:"League Gothic";
    src:url("fonts/league-gothic.regular.ttf") format("truetype");
}

/*==================================
FOOTER
===================================*/

.gr-footer{

width:100%;

background:#050505;

color:#fff;

padding:90px 0 35px;

overflow:hidden;

position:relative;

}


/*==================================
CONTAINER
===================================*/

.footer-container{

width:min(1600px,92%);

margin:auto;
 transform:scale(.98);

}


/*==================================
BIG TITLE
===================================*/

.footer-title{

margin-bottom:30px;
width:100%;
 

}

.footer-title h2{

 font-family:

   
        "League Gothic", "League Gothic",

       League Gothic;

font-size: 1690.5%;

 
font-weight:400;

line-height:.82;

letter-spacing:2px;

color:#ffffff;

text-transform:uppercase;

white-space:nowrap;
/*increase hight*/
 
display: inline-block;
    transform: scaleY(1.2); /* Increase height by 20% */
    transform-origin: bottom;
}


/*==================================
MAIN
===================================*/

.footer-main{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:70px;

margin-bottom:10px;

}


/*==================================
LEFT MENU
===================================*/

.footer-nav{

width:280px;

flex-shrink:0;

}

.footer-nav ul{

display:flex;

flex-direction:column;

gap:1px;

}

.footer-nav a{

font-family:

  
        "League Gothic", "League Gothic",

       League Gothic;

font-size:32px;

letter-spacing:1px;

color:#ffffff;

transition:.35s;

display:inline-block;

}

.footer-nav a:hover{

color:#A54CC4;

transform:translateX(10px);

}


/*==================================
ADDRESS PANEL
===================================*/

.footer-address-box{

flex:1;

background:#111111;

padding:20px 25px;

}


.footer-address-box h4{

 font-family:

   
        "League Gothic", "League Gothic",

       League Gothic;

font-size:23px;

font-weight:300;

margin-bottom:10px;
 padding-right:50;

letter-spacing:1px;

text-transform:uppercase;
 

}


/*==================================
GRID
===================================*/

.footer-address-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:0;

}


.address{

padding:0 30px;

position:relative;

}


.address:not(:last-child)::after{

content:"";

position:absolute;

right:0;

top:10px;

width:1px;

height:125px;

background:rgba(255,255,255,.18);

}


.address p{

font-family:'Oswald',sans-serif;

font-size:18px;

font-weight:300;

line-height:1.8;

color:#e6e6e6;

}


/*==================================
BOTTOM
===================================*/

.footer-bottom{

border-top:1px solid rgba(255,255,255,.20);

padding-top:30px;

display:grid;

grid-template-columns:1fr auto 1fr;

align-items:center;

column-gap:20px;

}


/*==================================
DESIGNER
===================================*/

.designer{

font-family:'Oswald',sans-serif;

font-size:15px;

font-weight:300;

color:#999;

}


/*==================================
SOCIALS
===================================*/

.footer-social{

display:flex;

justify-content:right;

gap:30px;

}


.footer-social a{

width:36px;

height:36px;

display:flex;

justify-content:center;

align-items:center;

transition:.35s;

}


.footer-social img{

width:26px;

height:26px;

filter:brightness(100);

transition:.35s;

}


.footer-social a:hover{

transform:translateY(-6px);

}


.footer-social a:hover img{

filter:

brightness(100)

drop-shadow(0 0 8px #A54CC4);

}


/*==================================
COPYRIGHT
===================================*/

.copyright{

text-align:right;

font-family:'Oswald',sans-serif;

font-size:15px;

font-weight:300;

color:#999;

}


/*==================================
SUBTLE NOISE
===================================*/

.gr-footer::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

opacity:.025;

background-image:

radial-gradient(#fff 1px,transparent 1px);

background-size:7px 7px;

}


/*==================================
ANIMATION
===================================*/

.footer-title{

animation:footerFade 1s ease;

}

.footer-nav{

animation:footerLeft 1s ease;

}

.footer-address-box{

animation:footerRight 1s ease;

}


@keyframes footerFade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}


@keyframes footerLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:none;

}

}


@keyframes footerRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:none;

}

}
/*socail media new*/
.footer-address-footer{
    display:flex;
    justify-content:flex-end;
    margin-top:40px;
}

.footer-social{
    display:flex;
    gap:28px;
}

.footer-social a{
    color:#fff;
    font-size:26px;
    width:auto;
    height:auto;
	margin-top:-20px;
	padding-bottom:20px;
}

.footer-social a:hover{
    color:#A54CC4;
    transform:translateY(-4px);
}


.footer-social i{
    font-size:24px;
    color:#fff;
    transition:.35s;
}

.footer-social a:hover i{
    color:#A54CC4;
    transform:translateY(-4px);
}

/*==================================================
PART 4C
==================================================*/


.gr-footer{

opacity:0;

transform:translateY(80px);

transition:

opacity 1s ease,

transform 1s ease;

}


.gr-footer.footer-visible{

opacity:1;

transform:none;

}


/* Address animation */

.address{

opacity:0;

transform:translateY(30px);

transition:

opacity .8s,

transform .8s;

}


.footer-visible .address{

opacity:1;

transform:none;

}


/* stagger */

.footer-visible .address:nth-child(1){

transition-delay:.15s;

}

.footer-visible .address:nth-child(2){

transition-delay:.30s;

}

.footer-visible .address:nth-child(3){

transition-delay:.45s;

}

.footer-visible .address:nth-child(4){

transition-delay:.60s;

}


/* Menu */

.footer-nav a{

position:relative;

}


.footer-nav a::before{

content:"";

position:absolute;

left:-18px;

top:50%;

width:0;

height:2px;

background:#A54CC4;

transition:.35s;

}


.footer-nav a:hover::before{

width:10px;

}


/* Social Icons */

.footer-social img{

transition:

transform .35s,

filter .35s;

}


/* Address Hover */

.address{

transition:

transform .35s,

background .35s;

}


.address:hover{

transform:translateY(-6px);

}


/* Panel */

.footer-address-box{

transition:

background .4s,

box-shadow .4s;

}


.footer-address-box:hover{

background:#161616;

box-shadow:

0 0 40px rgba(165,76,196,.08);

}

/*==================================================
PART 4D
PREMIUM EFFECTS
==================================================*/


/*=========================
TOP GRADIENT LINE
==========================*/

.footer-top-line{

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

overflow:hidden;

background:#111;
z-index:0;

}

.footer-top-line::after{

content:"";

position:absolute;

left:-30%;

top:0;

width:30%;

height:100%;

background:linear-gradient(

90deg,

transparent,

#A54CC4,

#ffffff,

#A54CC4,

transparent

);

animation:footerLineMove 7s linear infinite;

}

@keyframes footerLineMove{

from{

left:-35%;

}

to{

left:135%;

}

}


/*=========================
MOUSE LIGHT
==========================*/

.footer-light{

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(165,76,196,.18),

transparent 70%);

pointer-events:none;

transform:translate(-50%,-50%);

opacity:20;

transition:

opacity .4s,

left .12s linear,

top .12s linear;

filter:blur(30px);

z-index:0;

}


/*=========================
PARTICLES
==========================*/

.footer-particles{

position:absolute;

inset:0;

pointer-events:none;

opacity:.05;

background-image:

radial-gradient(#ffffff 1px,transparent 1px);

background-size:26px 26px;

animation:particleMove 40s linear infinite;

}

@keyframes particleMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-250px);

}

}


/*=========================
PARALLAX TITLE
==========================*/
 


/*=========================
SOCIAL PULSE
==========================*/

.footer-social a{

position:relative;

}

.footer-social a::after{

content:"";

position:absolute;

width:100%;

height:100%;

border-radius:50%;

border:1px solid rgba(165,76,196,.35);

opacity:0;

transform:scale(.8);

}

.footer-social a:hover::after{

animation:pulseRing .9s ease;

}

@keyframes pulseRing{

0%{

opacity:1;

transform:scale(.6);

}

100%{

opacity:0;

transform:scale(2);

}

}


/*=========================
ADDRESS GLOW
==========================*/

.address{

border-radius:6px;

padding:15px 25px;

}

.address:hover{

background:#181818;

box-shadow:

0 0 25px rgba(165,76,196,.12);

}


/*=========================
COPYRIGHT
==========================*/

.copyright{

transition:.4s;

}

.copyright:hover{

color:#fff;

letter-spacing:1px;

}


/*=========================
DESIGNER
==========================*/

.designer{

transition:.35s;

}

.designer:hover{

color:#A54CC4;

}


/*=========================
MENU ACTIVE BAR
==========================*/

.footer-nav a{

overflow:hidden;

}

.footer-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:#A54CC4;

transition:.35s;

}

.footer-nav a:hover::after{

width:100%;

}

/*==================================================
RESPONSIVE
==================================================*/

/*==============================
1600px
==============================*/

 


/*==============================
1400px
==============================*/

@media (max-width:1480px){

.footer-title h2{
    font-size:clamp(160px,11vw,240px);
}
.footer-title h2{
        font-size:1450%;
    }

.footer-main{
    gap:45px;
}

.footer-address-grid{
    grid-template-columns:repeat(4,1fr);
}

.footer-nav{
    width:240px;
}

.footer-nav a{
    font-size:28px;
}

}

/*==================================
1300px
===================================*/
@media (max-width:1300px){

    .footer-title h2{
        font-size:1350%;
    }

}



/*==============================
1200px
==============================*/

@media (max-width:1200px){

.footer-title h2{

    font-size:clamp(135px,10vw,200px);

}
.footer-title h2{
        font-size:200px;
    }


.footer-main{

    display:grid;

    grid-template-columns:240px 1fr;

    gap:40px;

}

.footer-nav{

    width:100%;

}

.footer-nav ul{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.footer-nav a{

    font-size:26px;

}

.footer-address-grid{

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.address{

    padding:15px 20px;

}

.address::after{

    display:none;

}

.footer-address-footer{

    justify-content:flex-end;

}

}


/*==============================
992px
==============================*/

@media (max-width:992px){

 

.footer-title h2{

    font-size:clamp(100px,13vw,160px);

    white-space:nowrap;

}

.footer-main{

    display:flex;

    flex-direction:column;

    gap:45px;

}

.footer-nav{

    width:100%;

}

.footer-nav ul{

    display:grid;

    grid-template-columns:repeat(3,minmax(120px,1fr));

    gap:18px;

    justify-items:center;

}

.footer-nav a{

    font-size:24px;

}

.footer-address-box{

    width:100%;

}

.footer-address-grid{

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.footer-address-footer{

    justify-content:center;

    margin-top:35px;

}

.footer-social{

    justify-content:center;

    gap:28px;

}

.footer-bottom{

    grid-template-columns:1fr;

    gap:20px;

    text-align:center;

}

.designer,

.copyright{

    text-align:center;

}

}


/*==============================
768px
==============================*/

@media (max-width:768px){

.footer-title h2{

    font-size:clamp(70px,14vw,110px);

}

.footer-nav ul{

    grid-template-columns:repeat(2,1fr);

}

.footer-nav a{

    font-size:22px;

}

.footer-address-box{

    padding:25px;

}

.footer-address-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.address{

    padding:12px 0;

}

.footer-address-box h4{

    font-size:22px;

}

.address p{

    font-size:16px;

}

.footer-social{

    gap:22px;

}

}


/*==============================
480px
==============================*/

@media (max-width:480px){

.gr-footer{

    padding:60px 0 30px;

}

.footer-title h2{

    font-size:clamp(48px,15vw,72px);

}

.footer-nav a{

    font-size:20px;

}

.footer-address-box{

    padding:20px;

}

.footer-address-box h4{

    font-size:20px;

}

.address p{

    font-size:15px;

    line-height:1.7;

}

.footer-social{

    gap:18px;

}

.footer-social i{

    font-size:22px;

}

.designer,

.copyright{

    font-size:14px;

}

}


/*start new media footer h2 font size adjustment*/
/*==================================
2000px
===================================*/
 /*start new media footer h2 font size adjustment*/
/*==================================
1600px
===================================*/
 

/*start new media footer h2 font size adjustment*/
/*==================================
1600px
===================================*/
 

/*==================================================
FORCE RESPONSIVE FOOTER TITLE
Place at the VERY END of your CSS
==================================================*/

 .footer-title h2{

    font-size:clamp(8rem, 17vw, 18.9rem) !important;

}