:root{
   --primary-100:#5DA399;
    --primary-200:#40867d;
    --primary-300:#004840;
    --accent-100:#FF6B6B;
    --accent-200:#8f001a;
    --text-100:#333333;
    --text-200:#5c5c5c;
    --bg-100:#E0E7E9;
    --bg-200:#d6dddf;
    --bg-300:#aeb5b7;
            
}
@font-face{
    font-family: Estedad;
    src: url('../fonts/Estedad.woff2')
}
*{
    box-sizing: border-box;
 }
            html,body{
                scroll-behavior:smooth ;
                margin: 5x 5px 5px 5px;
                padding: 7px ;
            }

            html{
				font-size: 17px;
			}
			body{
				 font-family: Estedad, tahoma;
			 background-color:  var(--bg-100);
			}
			a{
				text-decoration: none;
				color: var(--primary-200);
                
			}
            a:hover{
                color: var(--primary-300);
            }
			.container{
				background-color:  var( --bg-100);
			}
			p{
				text-align: justify;
				 font-size:16px;
                 margin: 7px;
			}
           
            /* web structure */
            main{
               display: grid;
               grid-template-columns: 200px auto;
               grid-template-rows: auto auto auto;
               grid-template-areas:
               'header header'
               'aside article'
               'footer footer'
               ;
               gap: 10px;
               width: 950px;
               min-height: 1000px;
               margin: 0 auto;
               padding: 10px;
            }
            header,aside,article,footer{
                background-color:  rgba(red, green, blue, 0);
                border-radius: 12px;
                box-shadow: 0px 0px 0px var(--bg-300);
            }
            header{
             grid-area: header;
             
            }
            .logoavat{
                margin: 8px;
            }
            aside{
            grid-area: aside;
            }
            article{
            grid-area: article;
            padding: 10px;
            }
            footer{
                grid-area: footer;
                direction: ltr;
                text-align: center;
                letter-spacing: 7px;
            }
           .up{
                position: fixed;
                right: 30px;
                bottom: 30px;
                margin: 0 auto;
                width: 50px;
                aspect-ratio: 1;
                background-image: url(../images/btn.png);
            }
            .up:hover{
                background-position: top right;
            }
            
            @keyframes logoplay{
                from{
                    transform: translateX(-400px)  scaleX(120px);
                    opacity: 0;
                }
                to{
                    transform: translateX(0px) scaleX(220px);
                    opacity: 1;
                }
            }
            .logoavat{
                animation: logoplay 5s;
                border-radius: 12px;
                width: 15%;
                height: auto;
            }
            /*gallery*/
            #gallery{
                text-align: center;
            }
            #gallery img{
                width: 220px;
                height: 220px;
                vertical-align:middle;
                border: 5px solid  var( --primary-100);
                border-radius: 50%;
                box-shadow: 0px 0px 4px var( --text-200);
                margin: 4px;
                transition: 0.4s;
            }
            #gallery img:hover{
                transform: translateY(-23px) ;
                border: 5px double  var( --primary-300);
                border-radius: 35%;
                /*tablet*/
            }
            @media screen and (max-width:1024px)
            {
                main{
                    width:100%
                }
                #nav{
                    display: none;

                }
            }
            /*mobile*/
            @media screen and (max-width: 500px){
              main{
                grid-template-columns: auto;
                grid-template-rows: repeat(4, auto);
                grid-template-areas: 
                'header'
                'article'
                'aside'
                'footer'
                ;
              }
            }
            .message{
                border-radius: 12px;
                padding: 12px 12px 12px 500px
            }
            .btn-primary{
                border-radius: 12px;
                border: 1px solid var(--bg-300);
                font-size: 20px;
                color: var(--bg-200);
                transition: 1s;
                background: linear-gradient(145deg, var(--accent-200) ,var(--primary-100));
                width: 100;
            }
            .btn-primary:hover{
                border-radius: 30px;
                border: 1px solid var(--bg-300) ;
                font-size: 20px; 
                transform: skewX(-10deg); 
                background: linear-gradient(185deg, var(--primary-100) ,var(--accent-200));

            }
            .d-grid:hover{
                border-radius: 12px;
                border: none !important;
                font-size: 20px;
                color: var(--primary-100);
                background: linear-gradient(145deg, var(--accent-100) ,var(--primary-100)) !important;
            }
            .badge{
                background-color: var(--primary-100) ;
                width: 100%;
                border-radius: 12px;
                font-size: 28px;
            }
            .about{
                background-color: var( --accent-100);
                border-radius: 10px;
                border: 1px solid var(--primary-200);
                padding: 4px;
                margin: 2px 2px 2px 0px;
                text-align: center;
            }

            .navbar{
                background-color: var(--primary-200) !important;
                
            }
            .nav-link{
                color: var(--bg-100) !important;
            }
            .btn-primary{
                width: 100%;
                border-radius: 12px;
                height: 50px;
            }
            .form-control,.form-check-input{
                color: black !important;
                border: 1px solid var(--primary-200) !important;
                box-shadow: 0px 0px 0px  var(--primary-200) ;
            }
            .form-control:focus{
                box-shadow: 0px 0px 10px  var(--primary-200) !important;

            }
            .search{
               background-color: var(--accent-200);
               transition: 1s;
            }
            .search:hover{
                background-color: var(--primary-200);
            }
            .navbar-brand{
                color: var(--bg-100) !important
            }
            .bi{
                color: var(--accent-200);
            }
            .bi-person-fill-add,.bi-search{
                color: var(--bg-200) !important;
            }
            .accordion-button{
                background-color: var(--accent-200) !important;
                border: 2px solid var( --accent-200) !important;
                box-shadow: 0px 0px 2px  var(--primary-100) !important;
                color: var(--bg-100) !important;
            }
            .accordion-item,.accordion-header:focus{
                border: 1px solid var(--primary-100) !important;
                box-shadow: 0px 0px 2px var(--primary-100) !important;
            }
            .w-100{
              width: 100% !important;
                height:  500px !important;
                object-fit: cover;
            }
            .d-block{
                border-radius: 12px !important;
                border: 5px solid var( --accent-200);
            }
            .card-img-top{
               width: 100%;
                height: 350px;
                object-fit: cover;
            }
            .card-img-bottom{
                width: 100% !important;
                height:  350px !important;
                object-fit: cover;
            }
            .map{
              border: 6px double var(--primary-100); 
              border-radius: 22px;
            }
            .map2{
                 border-radius: 3px solid var(--primary-100);
              border-top: 3px solid var(--primary-100);
            border-bottom: 3px solid var(--primary-100);
              border-radius: 12px;
            }
            .map3{
                    border-top: 3px solid var(--primary-100);
              border-bottom: 3px solid var(--primary-100);
              border-radius: 12px;
            }
            .rangbold{
                font-size: 20px;
                color: var(--primary-200);
            }
            .papiroos{
                width: 48%;
                text-align: center;
                border-radius: 20px;
                box-shadow: 2px 2px  12px 1px var(--bg-300);
            }
             .papiroos2{
            height: 330px;
            width: 48%;
            border-radius: 20px;
            box-shadow: 2px 2px  12px 1px var(--bg-300);
          }
            .video1{
               text-align: center;
                border-radius: 20px 20px 20px 20px;
                box-shadow: 2px 2px  12px 1px var(--bg-300) ;
                width: 100%;
                height: 400px;
            }