@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;1,300;1,400&display=swap');

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    background-color: #000;
    color: #FFFFFF;
    /* overflow: hidden; */
}

/* ================= */

.conti {
    position: relative;
    max-height: 100vh;
    width: 90vw;
    max-width: 630px;
    margin: auto;
    /* overflow: hidden; */
}

/* ================= */

.head {
    height: 10vh;
    width: 100%;
    text-align: center;
    padding-top: 3vh;
}

.name {
    display: inline-block;
    margin: auto 0;
}

h1 {
    /* font-size: 2.2rem; */
    /* font-size: 3vh; */
    font-size: max(3vh, 12px);
    letter-spacing: 1px;
    font-weight: 300;

    opacity: 1;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

h1:hover {
    /* opacity: 0.8; */
    cursor: pointer;
    color: LightGray;
}

/* ================= */

.image {
    position: relative;
    height: 65vh;
    max-width: 100%;
    width: auto;
    text-align: center;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

img {
    position: relative;
    /* height: 100%; */
    max-height: 65vh;
    max-width: 100%;
    z-index: -1;
}

.image:hover {
    opacity: 0.9;
    cursor: pointer;
}

/* ================= */

.fo1 {
    height: 10vh;
    width: 100%;
    font-size: 2vh;
    text-align: center;

    padding-top: 8vh;
    opacity: 1;
}

.fo2 {
    height: 10vh;
    width: 100%;
    font-size: 2vh;
    text-align: center;


    position: absolute;
    bottom: -20vh;
    font-weight: 100;
    /* padding-top: 4vh;
    font-weight: 100; */
    /* opacity: 0.6; */
}

.mail1{
    opacity: 0.65;
}

.mail1:hover {
    opacity: 0.8;
}

.tel1{
    opacity: 0.65;
}

.tel1:hover {
    opacity: 0.8;
}

a {
    text-decoration: none;
    color: #fff;
}

/* ================================== */

.animate1 {
    -webkit-animation: pulse1 0.8s ease-out forwards;
            animation: pulse1 0.8s ease-out forwards;
}

.animate2 {
    -webkit-animation: pulse2 0.8s ease-out forwards;
            animation: pulse2 0.8s ease-out forwards;
}

@-webkit-keyframes pulse1 {
    0% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        /* opacity: 1; */
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
        color: red;
    }
    100% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes pulse1 {
    0% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        /* opacity: 1; */
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
        color: red;
    }
    100% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@-webkit-keyframes pulse2 {
    0% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        /* opacity: 1; */
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
        color: red;
    }
    100% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes pulse2 {
    0% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        /* opacity: 1; */
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
        color: red;
    }
    100% {
        /* opacity: 1; */
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

/* ================================== */

@media only screen and (max-width: 430px) {

    .head {
        padding-top: 7vh;
    }

    .image {
        height: 55vh;
        margin-top: 8vh;
        /* width: 100%;
        height: auto; */
    }

    .fo1 {
        padding-top: 9vh;
    }
    
    .fo2 {
        font-size: 1.7vh;
        bottom: -21vh;
    }
}

/* ================= */

@media only screen and (height: 667px) {

    /* iphone se 2nd generation */

    .head {
        padding-top: 3vh;
        height: 7vh;

    } 

    .image {
        margin-top: 4vh;
    }

    .fo1 {
        padding-top: 18vh;
    }

    /* .fo2 {
        bottom: -24vh;
    } */
}

/* ================================== */