:root{
    --primary-100:#bb2649;
    --primary-200:#f35d74;
    --primary-300:#e8b7d5;
    --accent-100:#ffadad;
    --accent-200:#f8e3e3;
    --text-100:#4b4f5d;
    --text-200:#6a738b;
    --bg-100:#F5F5F5;
    --bg-200: #e2e1e0;
    --bg-300:#babecc;   
}
@font-face{
    font-family: Estedad;
    src: url('../fonts/Tanha.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: 16px;
                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) rotateY(180deg);
                    opacity: 0;
                }
                to{
                    transform: translateX(0px) rotateX(18deg);
                    opacity: 1;
                }
            }
            .logoavat{
                animation: logoplay 4s;
                border-radius: 15px;
                width: 15%;
                height: auto;
            }
            /*gallery*/
            #gallery{
                text-align: center;
            }
            #gallery img{
                width: 220px;
                height: 220px;
                vertical-align:middle;
                border: 5px solid  var( --primary-300);
                border-radius: 25%;
                box-shadow: 0px 0px 4px var( --text-200);
                margin: 4px;
                transition: 0.4s;
            }
            #gallery img:hover{
                transform: scale(1.1);
                border: 5px solid  var( --primary-100);
                border-radius: 12px;
            }
            @media screen and (max-width:1024px)
            {
                main{
                    width:100%
                }
                #nav{
                    display: none;
                }
            }
            @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: 10px;
                padding: 12px 12px 12px 500px
            }
            .btn-primary{
                border-radius: 30px;
                border: 1px solid var(--bg-300);
                font-size: 20px;
                color: var(--bg-200);
                transition: 1s;
                background: linear-gradient(145deg, var(--accent-100) ,var(--primary-100));
                width: 100;
            }
            .btn-primary:hover{
                border-radius: 30px;
                border: 1px solid var(--bg-300) ;
                font-size: 20px; 
                transform: translateY(-4px); 
                background: linear-gradient(285deg, var(--accent-100) ,var(--primary-100));

            }
            .d-grid:hover{
                border-radius: 30px;
                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: 30px;
                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(--bg-200) !important;
                
            }
            .nav-link{
                color: var(--primary-100) !important;
            }
            .btn-primary{
                width: 100%;
                border-radius: 25px;
                height: 50px;
            }
            .form-control,.form-check-input{
                color: black !important;
                border: 1px dotted var(--primary-100) !important;
                box-shadow: 0px 0px 0px  var(--accent-100) ;
            }
            .form-control:focus{
                box-shadow: 0px 0px 10px  var( --accent-100) !important;

            }
            .search{
               background-color: var(--primary-100);
               transition: 1s;
            }
            .search:hover{
                background-color: var( --accent-100);
            }
            .navbar-brand{
                color: var(--primary-100) !important
            }
            .bi{
                color: var(--primary-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-100) !important;
                box-shadow: 0px 0px 2px  var(--primary-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: 15px !important;
                border: 5px solid var( --accent-100);
            }
            .card-img-top{
               width: 100%;
                height: 350px;
                object-fit: cover;
            }
            .card-img-bottom{
                width: 100% !important;
                height:  350px !important;
                object-fit: cover;
            }
            .map{
              border-right: 6px double var(--primary-100);
              border-left: 6px double var(--primary-100);
              border-radius: 12px;
            }
            .map2{
                 border-right: 3px dotted var(--primary-100);
              border-left: 3px dotted var(--primary-100);
              border-bottom: 3px dotted var(--primary-100);
              border-radius: 33px;
            }
            .map3{
                    border-right: 3px dotted var(--primary-100);
              border-left: 3px dotted var(--primary-100);
              border-bottom: 3px solid var(--primary-100);
              border-radius: 33px;
            }
            .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) ;
            }
            .btn-group{
                background-color: var(--primary-100) !important;
                width: 80px !important;
                height: 38px !important;
            }
            .btn-group:hover{
                background-color: var(--accent-100) !important;
                width: 80px !important;
                height: 38px !important;
                color: var(--primary-100) !important;
            }