/*========================================================*/
/*-------首頁內容--------*/
/*========================================================*/

/*/////////////////////////////////////////////////////////*/
/*-------共用區塊--------*/
/*/////////////////////////////////////////////////////////*/

body{
  background: url(../index/images/bg.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}



.indexmain {
  position: relative;
  transition: min-height 0.3s;
}
.indexmain:before {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 0;
  width: 100%;
  /* height: 100%; */
  aspect-ratio: 4.17 / 1;
  background-image: url(../index/images/main_bg.webp); /*1920 * 460*/
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  
  z-index: -1;
}

.indexmain .wrap {
  max-width: 1840px;
  display: flex;
  align-items: center;
  /* display: none; */
}

/*首頁內容區塊*/
.mainContent {
  /* padding: 50px 0px; */
}

/*----- 首頁標題1 -----*/
.index_tit {
  font-size: 2.0625em;
  font-weight: 700;
  color: var(--secondary_color);
  line-height: 1.3;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 6px;
  text-indent: -6px;
}
.index_tit strong {
  font-size: inherit;
  line-height: initial;
  padding: 0;
  margin: 0;
  display: inline-block;
  font-weight: inherit;
}
.index_tit strong span {
  color: var(--primary_color);
}

@media screen and (min-width: 991px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (-o-min-device-pixel-ratio: 125/100) {
  /* 在螢幕放大125%且寬度大於1350時，套用這裡的特定樣式 */

  .indexmain .wrap {
    max-width: 915px;
    /* display: none; */
  }
}

@media screen and (min-width: 991px) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 150/100) {
  /* 在螢幕放大125%且寬度大於1350時，套用這裡的特定樣式 */

  /*----- 首頁標題1 -----*/
  .index_tit {
    /* font-size:1.4em; */
    font-weight: 600;

    font-size: calc(2.0625em / 1.25);
    letter-spacing: 3px;
    text-indent: -3px;
  }
}








/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), 
only screen and (min-resolution: 150dpi) and (max-resolution: 174dpi) {

	/*全站共用樣式*/
	:root {
		/* --fontSize: 1em;  */
	}

  .htmlFontSizeA body {
    /* font-size: calc(var(--fontSize) * 0.9); */
  }
  
  body ,
  .htmlFontSizeB body {
    /* font-size: calc(var(--fontSize) * 1); */
  }
  
  .htmlFontSizeC body {
    /* font-size: calc(var(--fontSize) * 1.3); */
  }

}







@media (max-width: 990px) {
  /* .mainContent{	
		padding: 25px 0px;	
	}	 */

  /*----- 首頁標題1 -----*/
  .index_tit {
    font-size: 1.5625em;
    /* margin-bottom: 20px; */
    letter-spacing: normal;
    text-indent: normal;
  }

}




body{
  background: url(../index/images/bg.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}


.indexmain {
  position: relative;

}
.indexmain:before {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 0;
  width: 100%;
  /* height: 100%; */
  aspect-ratio: 4.17 / 1;
  background-image: url(../index/images/main_bg.webp); /*1920 * 460*/
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  
  z-index: -1;
}

.indexmain .wrap {
  max-width: 1840px;
  display: flex;
  align-items: center;
  /* display: none; */
}

/*首頁內容區塊*/
.mainContent {
  /* padding: 50px 0px; */
}

/*----- 首頁標題1 -----*/
.index_tit {
  font-size: 2.0625em;
  font-weight: 700;
  color: var(--secondary_color);
  line-height: 1.3;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 6px;
  text-indent: -6px;
}
.index_tit strong {
  font-size: inherit;
  line-height: initial;
  padding: 0;
  margin: 0;
  display: inline-block;
  font-weight: inherit;
}
.index_tit strong span {
  color: var(--primary_color);
}

@media screen and (min-width: 991px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (-o-min-device-pixel-ratio: 125/100) {
  /* 在螢幕放大125%且寬度大於1350時，套用這裡的特定樣式 */

  .indexmain .wrap {
    max-width: 915px;
    /* display: none; */
  }
}

@media screen and (min-width: 991px) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 150/100) {
  /* 在螢幕放大125%且寬度大於1350時，套用這裡的特定樣式 */

  /*----- 首頁標題1 -----*/
  .index_tit {
    /* font-size:1.4em; */
    font-weight: 600;

    font-size: calc(2.0625em / 1.25);
    letter-spacing: 3px;
    text-indent: -3px;
  }
}

@media (max-width: 990px) {
  /* .mainContent{	
		padding: 25px 0px;	
	}	 */

  /*----- 首頁標題1 -----*/
  .index_tit {
    font-size: 1.5625em;
    /* margin-bottom: 20px; */
    letter-spacing: normal;
    text-indent: normal;
  }

}

/*========================================================*/
/*-------首頁_banner區--------*/
/*========================================================*/
/* 
.index_bannerArea {
}

.index_bannerArea .swiper-slide {
}

.index_bannerArea .swiper-slide a {
  position: relative;
  padding-top: 22.1%;
  display: block;
  overflow: hidden;
}

.index_bannerArea .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  float: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: 0.3s ease all;
} */

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px) {
  /* .index_bannerArea .swiper-slide a{	
		position: relative;
		padding-top: 22.1%;
		display: block;
		overflow: hidden;
	}

		.index_bannerArea .swiper-slide img.pcBanner{
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			float: none;
			width: 100% !important;
			height: 100% !important;
			object-fit: cover;
			transition: 0.3s ease all;	
		} */
}



.index_page{
  overflow: hidden;
  padding: 89px 0 191px;
  padding-top:  clamp(2.8125rem, 4.6354vw, 5.5625rem);
  padding-bottom: clamp(5.9375rem, 9.9479vw, 11.9375rem);
}
  .index_page .wrap{
      display: flex;
      max-width:  clamp(47.8125rem, 79.6875vw, 95.625rem);
  }


@media screen and (min-width: 1101px) {

  .htmlFontSizeA  .index_page {
    padding-top:  clamp(3.75rem, 7.8125vw, 9.375rem);
  }
    
}


/* 在螢幕放大125%且寬度大於1101時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.25) and
(-webkit-max-device-pixel-ratio: 1.49), 
only screen and (min-resolution: 125dpi) and (max-resolution: 149dpi) {

  .index_page .wrap{
      max-width:clamp(44.625rem, 72.9167vw, 87.5rem); /* 最小值 714px、大小約 72.9167vw、最大值 1400px */
  }


}


/* 在螢幕放大150%且寬度大於1101時，套用這裡的特定樣式 */ 
@media screen and (min-width: 1101px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 

    .htmlFontSizeC  .index_page{
      padding-top: clamp(2.8227rem, 4.5573vw, 5.4688rem); /* 最小值 45.16px、大小約 4.5573vw、最大值 87.50px */
    }

    .htmlFontSizeC .zoom-150 .index_page{
      padding-top: clamp(2.2904rem, 3.6979vw, 4.4375rem); /* 最小值 36.65px、大小約 3.6979vw、最大值 71px */
    }

    .index_page .wrap{          
        max-width:  59.375rem;
    }

    .htmlFontSizeC  .index_page .wrap{            
        max-width:  46.875rem; /*750px*/
    }
    .htmlFontSizeC .zoom-150 .index_page .wrap{            
      max-width:  63.4375rem; /*1015px*/
  }

}





@media (max-width:1100px) {
  .index_page{
    padding-top: 56.8px;
  }
}



@media (max-width:768px) {
  .index_page{
    padding-top: 74.8px;
  }
}

/*========================================================*/
/*-------首頁_左區--------*/
/*========================================================*/

.main_left{
  width: 80%;
  padding-top: clamp(3.7098rem, 5.9896vw, 7.1875rem); /* 最小值 59.36px、大小約 5.9896vw、最大值 115.00px */
}
.main_left_in{
  position: relative;    
  display: flex;    
  justify-content: center;    
  align-items: center;    
  flex-direction: column;    
  flex-grow: 1;
}

    .index_bannerArea{
      /* width: 80%; */
      margin-left:7%;
      width: 56%;
    }


      .index_bannerArea .banner{
        /* max-width: 80%; */
        margin: auto;
      }


      .pcBanner_area{
        position: relative;
      }
      .pcBanner_mask{
        display: block;
        transition: 0.3s ease all;
        -webkit-mask: url(../index/images/banner_mask.svg) no-repeat center center;
        mask: url(../index/images/banner_mask.svg) no-repeat center center;
        -webkit-mask-size: cover;
        mask-size: cover;
        position: relative;
        overflow: hidden;
        padding-top: 74.5%;
        width: 100%;
      }
      .pcBanner_area::before{
        position: absolute;
        content: "";
        background-image: url(../index/images/banner_stroke.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 100%;
        /* padding-top: 101.2%; */
        aspect-ratio: 739 / 991;
        z-index: 5;
      }
      .pcBanner_area img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        float: none;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
      }


      .circle-container {
        position: relative;
        /*width: 50vw; */ /* 根據螢幕寬度調整容器寬度，這裡使用 50% 的視窗寬度作為例子 */
        /*height: 50vw;*/ /* 使容器的高度與寬度一致，保持圓形 */
        margin: 0 auto;
        /*overflow: hidden;*/  /* 隱藏超出容器範圍的部分 */
        /* border: 1px solid black; */ /* 可選的邊框，便於查看容器範圍 */
        width: 90%;
        height: auto;
        aspect-ratio: 1 / 1.012;
        position: absolute;
        z-index: 2;
        
      }
      
      .center-circle {
            position: absolute;
            width: 20%; /* 相對於容器大小的百分比 */
            height: 20%;
            background-color: transparent;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .small-circle {
            position: absolute;
            width: 20%;  /* 小圓大小相對於容器寬度 */
            height: 20%;
            /* background-color: blue; */
            /* background-color: #fff0; */
            /* background-image:url(../index/images/navbar.png) ; */
            background-position: center;
            background-repeat: no-repeat;
            /* border-radius: 50%; */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: center;
        }
        
        /* .small-circle span {
            display: block;
            transform: rotate(0deg);
            position: absolute;
            width: 100%;
            text-align: center;
            line-height: 100%;
        } */
        
      
      
      
      .small-circle_in{
      position: relative;
      height: 100%;
      }
        .small-circle_in a{
          display: block;
          position: relative;
          height: inherit;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          text-decoration: none;
        }
        .small-circle_in a:hover{
          opacity: 0.7;
          transition: 0.3s all;
        }
        a:active,
        a:focus {
          text-decoration: none;
          background-color: var(--focus_color) !important;
          color: #fff !important;
          border: none;
        }
      
      
      
      .small_pic {
        position: relative; /* 让子元素以此为定位参考 */
        display: inline-block; /* 让 .small_pic 适应图片大小 */
        display: flex;
        justify-content: center;
      }
      
      .small_pic img.outer_icon {
        width: 100%;
        height: auto;
        display: block;
      }
      
      .small_pic img.inner_icon {
        width: 47%; /* 相对于外层图片的大小 */
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 让 inner_icon 完全居中 */
      }
      .htmlFontSizeA .small_pic img.inner_icon {
        /* width: 35%; 相对于外层图片的大小 */
        
      }
      .htmlFontSizeC .small_pic img.inner_icon {
        top: 45%;
        
      }
      
          .small-circle .title{
            border-radius: 60px;
            border: 3px solid #79BD4F;
            background: #EFEFEF;
            color: #2B2B2B;
            text-align: center;
            padding: 8px 15px;
            padding:  clamp(.25rem, 0.4167vw, .5rem)  clamp(.4375rem, 0.7813vw, .9375rem);
            font-family: 'SweiGothicLegCJKtc-Regular',serif;
            font-weight: bold;
            font-size: 1.375em;
            /* font-size:  clamp(.75rem, 1.14vw, 1.375em); */
            /* font-size: min(max(1.14vw, .75rem), 1.375em); */
            /* font-size:  clamp(0.75rem, calc(1.375em * 100 / 120), 1.375em); */
            font-size: 1.375em; /*22px*/
            line-height: 120%;
            position: absolute;
            position: unset;
            bottom: 0;
            left: unset;
            /* left: 0; */
            transform: unset;
            width: auto;
            white-space: nowrap;
            transform: translateY(-1.3125rem);
          }
      
      
          .small-circle a:active   .title,
          .small-circle a:focus    .title{
            /* text-decoration: none;
            background-color: var(--focus_color) !important;
            color: #fff !important; */
            color: #fff;
            border-color: var(--focus_color) !important;
            background-color: var(--focus_color) !important;
        }
      
  
  
  


.ovalShape-container {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1058 / 835;
  }
  

  .htmlFontSizeA  .ovalShape-container {
    aspect-ratio: 1058 / 435;
    }
    
  
  .ovalShape-container .small-circle {
    /* position: absolute;
    width: 20%;  
    height: 20%;
    background-position: center;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center; */
  
    /* position: absolute;
    width: 50px;
    height: 50px;
    background-color: blue;
    border-radius: 50%;
    transform: translate(-50%, -50%); */
  }
  
  .ovalShape-container .small-circle span {
  }
  
  /* .ovalShape-container .small-circle * {
    opacity: 0;
    display: none;
  } */



@media  (max-width: 1650px) {

  .small-circle .title{
    font-size: 1.125em; /*18px*/
  }

}




@media  (max-width: 1280px) {
  
  .small-circle {
    width: 27%;
    height: 27%;
  }


}




/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 

  .main_left{
    /* width: 75%; */
    /* padding-top:0; */
  }

  .index_bannerArea {
    /* width: 71%; */
    width: 54%;
    margin-left: 3%;
  }
  .htmlFontSizeC .ovalShape-container {
    /* aspect-ratio: 1058 / 835; */
    /* aspect-ratio: 1058 / 435; */
  }
  .htmlFontSizeC .index_bannerArea {
    /* width: 71%; */
    width: 55%;
    margin-left: 3%;
  }
  
  .small_pic {
    max-width: 76%;
  }

  .small-circle {
    width: 20%;
    height: 20%;
  }



  .htmlFontSizeA .small-circle .title{     
    font-size: 1em;
    padding: 4px 7px;
    bottom: unset;
    left: unset;
    transform: translateY(-.5625rem);
    
  }
  .htmlFontSizeB .small-circle .title{     
    transform: translateY(-.625rem);
    
  }

}




@media screen and (min-width: 1101px) and (max-width: 1280px){

  .small-circle .title{
    font-size: 1em; /*16px*/
  }
  
}

    
@media  (max-width: 1100px) {
  .index_page .wrap{
    display: block;
    width: 100%;
  }  
  .circle-container {
    display: none;
  }
  .pcBanner_area{
    display: none;
  }
  .main_left{
    width: 100%;
    max-width: 990px;
    padding-top: 0;
  }
  .main_left_in{
    display: block;
  }
  .index_bannerArea{
    width: 100%;
    margin: 0 auto;
  }


}




    /* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
    @media screen and (min-width: 991px) and (min-height: 500px) and 
    (max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
    (-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
    (max-resolution: 174dpi) { 
      .main_right{
        width: 40%;
       
      }
    }










/*========================================================*/
/*-------首頁_logo區--------*/
/*========================================================*/
.main_right{
  /* width: 40%; */
  box-sizing:border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}


.main_logo{
  width: 100%;
  max-width: 320px;
}

.main_logo a {
  display: block;

}
.main_logo a img{
  width: 100%;
  height: auto;

}
.right_img_area{
  display: flex;
  justify-content: center;
  align-items: center;
}
.right_img_area{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.right_img_area .inner{
  width: 50%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}
.main_logo {
  position: relative;
}
.main_logo a .infotitle{
  position: absolute;
  left: 55%;
  bottom: 10%;
  transform: translateX(-50%) translateY(-10%);
  color: #467746;
  font-weight: 700;
  max-width: 300px;
  width: 100%;
  text-align: center;
  font-size: 1.125em; /*18px*/
}
.htmlFontSizeC .main_logo a .infotitle{
  /* font-size: 1em; */
}


@media screen and (min-width: 1101px){

.htmlFontSizeA .right_img_area .inner{
  width: 30%;
  width: 39%;
}
.htmlFontSizeA .main_logo a .infotitle{
  bottom: 21%;
  bottom: 17%;
}


.htmlFontSizeC .right_img_area .inner{
  width: 40%;
  top: 39%;
  transform: translate(-50%, -39%);
}
.htmlFontSizeC .main_logo a .infotitle{
  bottom: 19%;
}

}




/* 在螢幕放大125%且寬度大於1101時，套用這裡的特定樣式 */ 
@media screen and (min-width: 1101px) and (min-height: 500px) and
 (max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.25) and 
 (-webkit-max-device-pixel-ratio: 1.49),
 only screen and (min-resolution: 125dpi) and (max-resolution: 149dpi) {



  .htmlFontSizeB .right_img_area .inner ,
  .right_img_area .inner{
    width: 40%;
    top: 39%;
    transform: translate(-50%, -39%);
  }
  .htmlFontSizeB .main_logo a .infotitle ,
  .main_logo a .infotitle{
    bottom: 19%;
  }


 }



/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 
  .right_img_area .inner{
    width: 44%;
    height: auto;
    position: absolute;
    top: 46%;
    left: 55%;
    transform: translate(-50%, -55%);
  }
  .main_logo{
    width: 100%;
    max-width: 200px;
  }
  .main_logo a .infotitle{
    font-size: 1em;
    bottom: 16%;
    font-weight: 800;
    width: 200px;
  }

  .htmlFontSizeC .zoom-150 .main_logo a .infotitle{
    font-size: 0.9em;
  }
  
}
@media (max-width:1100px) {
  .main_right{
    display: none;
  }
  .right_img_area img:first-of-type{
    width: 100%;
    max-width: 174px;
  }
  .right_img_area img:last-of-type{
    /* width: 50%;
    height: 50%; */

    width: 50%;
    max-width: 70px;
    left: 51%;
    height: auto;
    aspect-ratio: 1;
  }
  .main_logo .nav_title{
    border-radius: 60px;
        border: 3px solid #79BD4F;
        background: #EFEFEF;
        color: #2B2B2B;
        text-align: center;
        padding: 8px 15px;
        font-family: 'SweiGothicLegCJKtc-Regular', serif;
        font-weight: bold;
        font-size: 1.375em;
        /* font-size: clamp(.75rem, 1.14vw, 1.375em); */
        /* font-size: min(max(1.14vw, .75rem), 1.375em); */
        font-size: clamp(0.75rem, calc(1em* 100 / 120), 1em);
        line-height: 120%;
        position: absolute;
        bottom: -15%;
        left: 50%;
        transform: translate(-50%, 15%);
        width: auto;
        white-space: nowrap;
  }
  
}

/*========================================================*/
/*-------手機板nav區--------*/
/*========================================================*/
.nav_area{
  display: none;
}
@media(max-width:1100px){
  .nav_area{
    display: block;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
  }
  .nav_container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px; 
    
  }
  .nav_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .nav_img {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative;
    
    
  }
  
  .outer_icon {
    display: block;
    width: 100%;
    height: auto;
    
  }
  
  .inner_icon {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    height: auto;
  
  
  }
  .nav_item .nav_title{
    border-radius: 60px;
    border: 3px solid #79BD4F;
    background: #EFEFEF;
    color: #2B2B2B;
    text-align: center;
    padding: 8px 15px;
    font-family: 'SweiGothicLegCJKtc-Regular',serif;
    font-weight: bold;
    font-size: 1.375em;
    /* font-size:  clamp(.75rem, 1.14vw, 1.375em); */
    /* font-size: min(max(1.14vw, .75rem), 1.375em); */

    font-size:  clamp(0.75rem, calc(1em * 100 / 120), 1em); 

    line-height: 120%;
    position: absolute;
    bottom: -15%;
    left: 50%;
    transform: translate(-50%, 15%);
    width: auto;
    white-space: nowrap;
  }
  .nav_item a:active   .nav_title,
  .nav_item a:focus    .nav_title{
    /* text-decoration: none;
    background-color: var(--focus_color) !important;
    color: #fff !important; */
    color: #fff;
    border-color: var(--focus_color) !important;
    background-color: var(--focus_color) !important;
}
}

@media (max-width:768px){
  .nav_container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    
  }
}
@media (max-width:320px){
  .nav_container{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    
  }
}