* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

img{
    width: 100%;
}

.top {
    width: 100%;
    margin: 0;
    padding: 20px;
    background-color: green;
}
.title
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
width: 40%;
border-radius: 20px;
background-color: white;
padding: 20px;
padding-left: 100px;
padding-right: 100px;

}

.bottom
{  
background-color: green;
width: 100%;
}
.maingrid
{
margin-top: 40px;
display: grid;
grid-gap: 10px;
padding: 10px;
text-align: center;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 40px;
}
.menu
{
grid-column: span 1;
color: green;
font-size: 20px;
}
.gridimages
{
background-color: white;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 20px ;
overflow: hidden;
padding: 20px;
border-radius: 20px;
}
.ads
{
grid-column: span 1;
color: green;

}
.adimg
{
width: 100%;
/* height: 450px; */
}

#frog01
{
grid-column: span 3;
background-image: url("upgift11img/frog_long01.jpg");
background-size: cover;

}
#frog02
{
grid-column: span 1;
background-image: url("upgift11img/frog01.jpg");
background-size: cover;

}

#frog03
{
grid-column: span 1;
background-image: url("upgift11img/frog02.jpg");
background-size: cover;
}

#frog04
{   
grid-column: span 3;
background-image:  url("upgift11img/frog04.jpg");
background-size: cover;
}

#frog05
{
grid-column: span 4;
background-image: url("upgift11img/frog06.jpg");
background-size: cover;
}
#frog06
{
grid-column: span 4;
color: green;
font-size: 15px;
gap: 0px ;
height: 100px;
}
.fyou
{
/* height: 250px; */
border-radius: 40px;
gap: 20px;
}
.dumass
{
margin-bottom: 20px;
padding: 15px;
border-radius: 20px;
background-color: white;
}
.text-divider 
{
    display: flex;
    align-items: center;
    text-align: center;
    grid-column: span 5;
}

.text-divider::before,
.text-divider::after 
{
    content: '';
    flex: 1;
    height: 2px;
      border-color: green;
    background-color: green;
}

.text-divider span
 {
    padding: 0 30px;
    font-size: 20px;
    font-weight: bold;
    padding-top: 30px;
    padding-bottom: 30px;
   
}
.linegrid
{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px ;
}
.text 
{
    background-color: white;
    border-radius: 20px;
    color: green;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 30px;
}
.bottom
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px ;
background-color: green;
color: white;
}
.bottomr
{   
text-align: right;
margin-right: 20px;
color: white;
}
.bottoml
{

margin-left: 20px;
}
.arrow {
font-size: 100%;

}
a {
color: white;
text-decoration: none;
}
.centercontent
{
grid-column: span 5;
}
.secondimages
{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px ;
color: green;
}
.coolimg
{
margin-top: 20px;
margin-bottom: 20px;
background-color: white;
border-radius: 20px;
padding: 20px;;
}
/* #onelength
{
object-fit: cover;
width: 100%;
} */
.line
{
border: 1px solid green;
}
.coolimg p
{
color: black;
}
.dotted
{
border-style: dashed;
border-color: green;
border-width: 1px;
}
h1, h2, p, .text
{
    font-family: "Dancing Script", sans-serif;
}
.h2
{
font-size: 30px;
font-weight: 200;
}
@media screen and (max-width: 768px) 
{
    /* Mobile layout - stack everything vertically */
    .maingrid {
        grid-template-columns: 1fr;
    }
    
    .menu {
        grid-column: span 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .dumass {
        margin-bottom: 0;
    }
    
    .centercontent {
        grid-column: span 1;
    }
    
    .gridimages {
        grid-template-columns: 1fr;
    }
    
    #frog01, #frog04, #frog05, #frog06 {
        grid-column: span 1;
    }
    
    .secondimages {
        grid-template-columns: 1fr;
    }
    
    .ads {
        grid-column: span 1;
        display: none;

    }
    
    .linegrid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .text-divider {
        grid-column: span 1;
        justify-content: center;
    }
    
    .text-divider::before,
    .text-divider::after {
        display: none;
    }
    
    .title {
        width: 80%;
    }
    
    .bottom {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .bottoml {
        margin-left: 0;
    }
    
    .bottomr {
        margin-right: 0;
        text-align: center;
    }
}