:root {
    --bg: #050505;
    --card: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.12);
    --text: #ffffff;
    --muted: #a1a1aa;
    --accent: #3b82f6;
}

@font-face {
    font-family: Ignis;
    src: url('font/Ignis et Glacies Sharp.ttf'); /* IE9 Compat Modes */
  	src: url('font/Ignis et Glacies Sharp.ttf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/Ignis et Glacies Sharp.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/Ignis et Glacies Sharp.woff') format('woff'), /* Pretty Modern Browsers */
       url('font/Ignis et Glacies Sharp.ttf')  format('truetype'); /* Safari, Android, iOS */
}

.rajdhani-light {
    font-family: "Rajdhani", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.rajdhani-regular {
    font-family: "Rajdhani", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.rajdhani-medium {
    font-family: "Rajdhani", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.rajdhani-semibold {
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.rajdhani-bold {
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-style: normal;
}



* {
    box-sizing: border-box;
}


body {
    margin:0;
    min-height:100vh;
    font-family: "Rajdhani", sans-serif;
    background:var(--bg);
    color:var(--text);
    display:flex;
    flex-direction:column;
}


.background {
    position: fixed;
    inset: 0;
    z-index: -1;

    background:
            radial-gradient(
                    circle at 20% 20%,
                    rgb(0 158 227 / 0.28),
                    transparent 38%
            ),
            radial-gradient(
                    circle at 80% 30%,
                    rgb(0 110 190 / 0.18),
                    transparent 35%
            ),
            radial-gradient(
                    circle at 50% 90%,
                    rgb(0 60 120 / 0.15),
                    transparent 45%
            ),
            linear-gradient(
                    135deg,
                    #04080f 0%,
                    #07131f 35%,
                    #0b1b2b 70%,
                    #0f2538 100%
            );
}


.hero {

    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px 20px;

}


.glass {

    width:min(900px,100%);

    padding:70px 60px;

    text-align:center;

    background:var(--card);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

    border-radius:32px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.5);

}


.brand {

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

}


.brand img {

    object-fit:contain;

}


.logo {

    font-size:28px;
	margin-bottom: 4px;
    font-weight:700;
    letter-spacing:2px;
}


.logo span {
    background: linear-gradient(90deg, #7a7a7a, #ff7a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}



h1 {

    margin:40px 0px 6px 0px;

    font-size:clamp(28px,3vw,36px);

	text-transform: uppercase;

    letter-spacing:2px;
	line-height:1.3;

	font-family:  "Rajdhani", sans-serif;
}

p {

    max-width:600px;

    margin:0 auto;

    color:var(--muted);

    font-size:20px;

    line-height:1.3;

}



.contacts {

    margin:50px 0;

    display:grid;

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

    gap:15px;

}


.contacts a {

    text-decoration:none;

    color:white;

    padding:22px;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

}


.contacts a:hover {

    transform:translateY(-5px);

    border-color:#3b82f6;

}


.contacts small {

    display:block;

    color:var(--muted);

    margin-bottom:8px;

}



.button {

	font-family: Rajdhani;
    display:inline-block;

    padding:15px 35px;

    border-radius:999px;

    background:white;

    color:black;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

	 font-weight:600;
    letter-spacing:1px;

}


.button:hover {

   transform:translateY(-5px);

    background:#dbeafe;

}



footer {

    padding:25px 40px;

    display:flex;

    justify-content:space-between;

    color:#71717a;

    font-size:16px;

}



@media(max-width:700px){

    .glass {

        padding:40px 25px;

    }


    h1 {

        letter-spacing:-1px;

    }


    .contacts {

        grid-template-columns:1fr;

    }


    footer {

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}


.gallery{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin:60px 0;
}

.gallery img{
    width:100%;
    display:block;
    border-radius:18px;
    transition:.25s;
}

.gallery a{
    overflow:hidden;
    border-radius:18px;
    text-decoration: none;
}

.gallery img:hover{
    transform:scale(1.05);
}

@media (max-width:900px){
    .gallery{
        grid-template-columns:repeat(2,1fr);
    }
}

/*@media (max-width:560px){
    .gallery{
        grid-template-columns:1fr;
    }
}*/

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
}

.gallery-item:hover img{
    transform:scale(1.05);
}

.gallery-item img{
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
}


.gallery-more{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.65);
    color:white;
    font-size:48px;
    font-weight:100;
    border-radius:18px;
    pointer-events:none;
    line-height:1.1;
}

.gallery-more span{
    display:block;
    font-size:24px;
    font-weight:100;
}


.hidden-gallery{
    display:none;
}

.gallery-title {
    font-family: Rajdhani;
    text-align:center;
    margin-top:12px;
    font-size:18px;
    font-weight:600;
    color: #ffffff;
    text-decoration: none;
}