@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=DM+Serif+Text:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Odibee+Sans&family=Teko:wght@300..700&display=swap');
/*   font-family: "DM Serif Text", serif; */
@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=DM+Serif+Text:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Odibee+Sans&family=Teko:wght@300..700&family=Tektur:wght@400..900&display=swap');
/* font-family: "DM Serif Text", serif; */

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

/* ------------------------------------------------------------------ */

body{
    background-color: #2b5c7a;
    user-select: none;
}

/* ------------------------------------------------------------------ */


.header{
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

.part1{
    font-family: "DM Serif Text", serif;
    font-weight: bolder;
    font-size: 60px;
    color: white;
}

.part2{
    font-family: "DM Serif Text", serif;
    color: silver;
}

/* ------------------------------------------------------------------ */


.img1{
    width: 100%;
    text-align: center;
}
.photo1{
    width: 250px;
    height: 250px;
    transition-duration: 1s;
    animation-name: photo1;
    animation-duration: 3s;
    animation-iteration-count: 1;
}
@keyframes photo1 {
    0%{
        transform: translate(0px , 150px);
    }
    50%{
        transform: scale(2.5 , 2.5);
    }
    100%{
        transform: scale(1 , 1);
    }
}

/* ------------------------------------------------------------------ */


.owner{
    text-align: center;
    color: black;
    animation-name: owner;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes owner {
    0%{
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    75%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

/* ------------------------------------------------------------------ */


.container{
    margin-top: 10px;
}

.box1{
    width: 100%;
    height: 300px;
    border: 5px solid white;
    margin-top: 5px;
    border-radius: 20px;
}

.box2{
    width: 100%;
    height: 300px;
    border: 5px solid white;
    margin-top: 5px;
    border-radius: 20px;
    animation-name: box2;
    animation-duration: 5s;
    animation-iteration-count: 1;
}
@keyframes box2 {
    0%{
        opacity: 0;
    }
    25%{
        opacity: 0.25;
    }
    50%{
        opacity: 0.50;
    }
    75%{
        opacity: 0.75;
    }
    100%{
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */

.icon1{
    width: 100%;
}
.Icon1{
    width: 250px;
    height: 250px;
    margin: auto;
    margin-top: 20px;
    animation-name: Icon1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes Icon1 {
    0%{
        transform: translate(20px , 0px);
    }
    25%{
        transform: translate(0px , 0px);
    }
    50%{
        transform: translate(20px , 0px);
    }
    75%{
        transform: translate(0px , 0px);
    }
    100%{
        transform: translate(20px , 0px);
    }
}

/* ------------------------------------------------------------------ */

.txt2{
    color: white;
    margin-top: 10px;
}

.txt3{
    color: rgb(255, 0, 0);
}

.part3{
    margin-top: 20px;
    color: white;
}

.part4{
    margin-top: 20px;
    margin-left: 8px;
    color: white;
}

#box1{
    width: 300px;
    text-align: center;
    height: 35px;
    outline: none;
    color: black;
    background-color: transparent;
    border: 2px solid silver;
    border-radius: 10px;
}

.hr1{
    width: 70%;
    color: white;
    margin: auto;
    margin-top: 20px;
}

#box2{
    width: 300px;
    text-align: center;
    height: 35px;
    outline: none;
    color: black;
    background-color: transparent;
    border: 2px solid silver;
    border-radius: 10px;
}

.hr1{
    width: 70%;
    color: white;
    margin: auto;
    margin-top: 20px;
}

#btn1{
    width: 200px;
    height: 40px;
    border: none;
    color: black;
    font-weight: bolder;
    background-color: silver;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 10px solid black;
    margin-top: 15px;
}

.nan{
    height: 20px;
    width: 100%;
    margin-top: 10px;
}



/* ************************************************************************** */

@media (max-width : 991px) {
    .Icon1{
        width: 220px;
        height: 220px;
        margin: auto;
        margin-top: 20px;
        rotate: 90deg;
        animation-name: Icon1;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    @keyframes Icon1 {
        0%{
            transform: translate(20px , 0px);
        }
        25%{
            transform: translate(0px , 0px);
        }
        50%{
            transform: translate(20px , 0px);
        }
        75%{
            transform: translate(0px , 0px);
        }
        100%{
            transform: translate(20px , 0px);
        }
    }
    
}

@media (max-width : 767px) {
    .box2{
        width: 100%;
        height: 340px;
        border: 5px solid white;
        margin-top: 5px;
        border-radius: 20px;
        animation-name: box2;
        animation-duration: 5s;
        animation-iteration-count: 1;
    }
    @keyframes box2 {
        0%{
            opacity: 0;
        }
        25%{
            opacity: 0.25;
        }
        50%{
            opacity: 0.50;
        }
        75%{
            opacity: 0.75;
        }
        100%{
            opacity: 1;
        }
    }

    .Icon1{
        width: 200px;
        height: 200px;
        rotate: 90deg;
        margin: auto;
        margin-top: 20px;
        animation-name: Icon1;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    @keyframes Icon1 {
        0%{
            transform: translate(20px , 0px);
        }
        25%{
            transform: translate(0px , 0px);
        }
        50%{
            transform: translate(20px , 0px);
        }
        75%{
            transform: translate(0px , 0px);
        }
        100%{
            transform: translate(20px , 0px);
        }
    }

    .hr1{
        width: 95%;
        color: white;
        margin: auto;
        margin-top: 20px;
    }
}