body {
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    margin-top:100px;
}

@font-face {
    font-family: myFont;
    src: url("../fonts/nasalizationrg.ttf");
}

@font-face {
    font-family: myFont2;
    src: url("../fonts/BalooTamma2-VariableFont_wght.ttf");
}

.navbar {
    display: flex;
    width: 820px;
    height:100px;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: 0px 2px 6PX 1PX #574fcc;

    border-radius: 20px 20px 20px 20px;
}

.logo {
    display: flex;
    width:200px;
    height:100px;
   
    justify-content: center;
    align-items: center;
    border-width: 2px;

    font-family: myFont;
    font-size:25px;
    color:#6e67d6;
}

.star_logo{
    height: 30px;
    width: 30px;
    margin-right: 5px;
}
.links{
    display: inline-flex;
    width:600px;
    height:100px;
    align-items: center;
    justify-content: center;
    font-family: myFont2;
    font-size:16px;
    color:#8e3431;
    gap:20px;
}

.links > a {
    text-decoration: none;
    font-weight: bold;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 0px 10px 0px 10px;
    color:#6e67d6;
}

.links > a:hover {
    background-color: #6e67d6;
    transition: 0.6s ease-in-out;
    border-radius: 10px;
    color:white;
    height: 40px;
    box-shadow: 0px 3px 10px 5px rgb(247,189,47,0.99);
}

.animation_1:hover .arrow_1 { 
    border-top:3px solId white;
    border-left:3px solid white;
}

.animation_2:hover .arrow_2 { 
    border-top:3px solId white;
    border-left:3px solid white;
}

.button{
    display: flex;
    width:150px;
    height:100px;    
    align-items: center;
    justify-content: end;
}

.try_button {
    margin-right:10px;
}

.arrow_1, .arrow_2 {
    width:4px;
    height:4px;
    border-top:3px solId #6e67d6;
    border-left:3px solid #6e67d6;
    margin-left:7px;
    transition:0.8s;
    border-radius: 1px;
    transform:rotate(45deg);
}

.drop_down_content {
    display: grid;
    margin-top:8px;
    visibility: hidden;
    grid-template-columns: 192px 40px 169px 40px 169px 40px 169px;
    grid-template-rows: 40px 60px 40px 60px;
    grid-gap: 0px;
    width:820px;
    box-shadow: 1px 13px 38px -11px rgb(38 84 138);
    -webkit-box-shadow: 1px 13px 38px -11px rgb(22 12 175);
    -moz-box-shadow: 1px 13px 38px -11px rgba(38,84,138,1);
    BORDER-RADIUS: 10PX;

}

.next_content_title {
    grid-row: 1 / span 4;
    width:172px;
    display:grid;
    justify-items: center;
}

.next_content_title > h2 {
    font-family:myFont;
}

.next_content_title > h6 {
    font-family:myFont2;
    text-align:justify;
    margin-top:0px;
    padding:0 10px 0 10px;
    color:#4b4b4b;
}

.content_icon {
    grid-row:span 2;
    
}

.icon{
    width:40px;
    heigHt:40px;
}

.content_title {
    display: flex;
    align-items: center;
    
}

.content_title > h4 {
    font-family:myFont2;
    margin-left:10px;
    font-size:15px;
    color:#605ab6;
}

.content_text > p {

    margin:0 10px 0 10px;
    text-align:justify;
    font-size:14px;
}

.try_button {
    background-color: rgb(110, 103, 214);
    border-radius: 10px;
    color: white;
    height: 40px;
    font-family: myFont2;
    font-weight: bold;
    font-size:16px;
    border:none;
    width:100px;
}

.try_button:hover {
    background-color: white;
    color:#605ab6;
    border:2px solid #605ab6;
    transition: 0.4s ease-in;
}


.git {
    display: flex;
    width: 695px;
    height:45px;
    position: relative;
    align-items: center;
    justify-content: center;
    
    margin-top: 40px;
    gap:20px;
}

.img_git {
    width: 45px;
    height: 45px;
}

.link_git {
    display:flex;
    align-items: center;
    height: 45px;
    color:#463ebe;
    text-decoration: none;
  
}