@media only screen and (max-width:768px)
 {
  
  .topbox{display: grid;grid-template-areas: 'topbox-a topbox-a topbox-a topbox-a ' 
    'topbox-b topbox-b topbox-b topbox-b ' ;}

.topbox-a{grid-area: topbox-a ;display:none; } 
.topbox-b{grid-area: topbox-b;place-items: center;}  
.topbox-b ul{float:none;} 
.topbox-a .location{display: flex;gap:5px;flex-direction: column;}                                      
.topbox-a .location blockquote{font-size: 10px;font-weight: 200;}
.hcheader{display: flex;justify-content: space-between;align-items: center;}
.hcrightmenu{flex:calc(15%);width: 100%;}
.hclogo{flex:calc(85%);width: 100%;padding-top:50px;overflow-y: hidden;}
.logoim{width: 100%;object-fit:cover;height: 100%;}
.hcrightmenu .fa-bars{display: block;font-size: 32px;position: relative;margin: 0;padding-top:40px;padding-bottom: 70px;}
.hcrightmenu:hover  .menu{display: block;float:left;position:absolute;z-index: 1000;}
                                             .menu{list-style: none;position: relative;right:23rem;display: none;background-color: var(---bgcolor);width: 40%;}
                                             .menu .listmenu{cursor: pointer;display: inline;gap:10px;margin-top: 20px;}
                                             
                                             .menu .listmenu .item{display: block;color:var(---color);padding:0em 0em 1.3em 0em;font-weight: 600;transition: transform 3s ease-in-out;}
                                             .menu .listmenu .item:hover{color:black;border-bottom: 3px solid #f1f1f1;}
                                             .listmenu:hover .submenu{display: block;width: 100%;animation: move 3s ease-in-out forwards 3s;}
                                             @keyframes move{
                                             1.2%{
                                             transform: translateY(1.2%);
                                             }
                                             }
                                             .submenu{display:none;position: absolute;z-index:1000;list-style: none;padding: 0;top:3rem;left: 21.8em;}
                                             .submenu .sublist{padding: 0; margin: 0;border-bottom: 1px solid  #f1f1f1;background:var(---bgcolor);z-index: 1000;}
                                             .sublist a{display: block;padding:8px 0px 8px 5px;color:#f1f1f1;font-weight: 500;animation: move 1s ease-in;transition:2s;}
                                             .submenu .sublist:last-child{border:none;}
                                             .sublist:hover{background: var(---bgcolor);border-bottom: 2px solid black;}
                                             

                                             .sliders, .wrap , .slide , .slide-content{
                                              padding: 0;
                                              margin: 0;
                                              width: 100%;
                                              height: 50vh;
                                              overflow-x: hidden;
                                              overflow-y: hidden;
                                          }
                                          .wrap{
                                              position: relative;
                                          }
                                          
                                          .slide-content{
                                              display: flex;
                                              flex-direction: column;
                                              justify-content: center;
                                              align-items: center;
                                              position: absolute;
                                              top:-0px;
                                              margin-top: -0px;
                                              background-color:rgb(0,0,0,0.500);
                                          }
                                           .slide-content .caption{
                                              display: flex;
                                              justify-content: center;
                                              align-items: left;
                                              flex-direction: column;
                                              margin-top: -5em;
                                              width:70vw;
                                              transition: width 2s;
                                              
                                          }
                                          .caption .btn{background:black;width:50%;padding: 0.5em;color: #f1f1f1;;font-weight: 500;text-align: center;border-radius: 10px;}
                                          .caption .btn:hover{background:rgb(11, 50, 92) ;}
                                          .title{font-size: 32px;font-weight:600; color: #fff;box-shadow: 1px 1px 2px solid rgb(30, 96, 165);}
                                          .slide p{font-size:21px; color: #fff;opacity: 1;font-weight: 400;}
                                          .arrow{cursor: pointer;position:absolute; top: -80%; margin-top:80%;width: 0;height: 0;z-index:3;text-align: center;padding: 20px;background-color: #fff;
                                                 border-radius: 50%;
                                               }
                                          .arrow:hover{background:rgb(6, 44, 85) ;color: #fff;}
                                          .left-arrow{margin-left: 30px;}
                                          .right-arrow{right:0;margin-right: 30px;}
                                          .finatit{width:100%;margin: 0;}
                                          .finatit{font-size: 24px;font-weight: 700;margin: 0;}
                                          .finatit p{padding: 2rem 0rem;font-size: 18px;font-weight: 400;text-shadow:1px 1px 1px var(---bgcolor);} 
.agim{display: none;}
.imageg{width:100%;height: 30vh;}
.imag{width:100%;object-fit: cover;}
.agricapt{margin-top: 7rem;padding:1rem;}
.agricapt a{font-size:24px;font-weight: 500;color:#f1f1f1;display: block;margin-bottom: 10px;}
.agricapt a:hover{color: var(---bgcolor);}
.agricapt p{font-size: 21px;font-weight: 400;color:#f1f1f1;
  --max-lines:4;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.3em;margin: 0;
}
.finaim{width:100%;height: 35vh;background-size: cover;background-position: center;}
.fim{width:100%;object-fit: cover;}
.finacapt{padding:1rem 0.5rem;}
.finacapt a{display: block;font-size: 24px;font-weight: 600;place-items: center;color: var(---color);}
.finacapt a:hover{color:var(---bgcolor)}
.finacapt p{font-size: 20px;font-weight: 400;}
.shortimg{background-position: center;background-size: cover;width:100%;height:35vh;float:left;}
.shortim{width:100%;height: 100%;object-fit: cover;}
.shortcapt p {padding: 0px 5px;text-shadow:1px 1px 1px #333;font-weight: 400;font-size: 21px;text-shadow: none;}
.shortcapt a{display: block;padding: 4px 5px;font-size: 24px;font-weight: 500;text-shadow:1px 1px 1px var(---bgcolor);color: var(---color);--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.2em;}
.shortcapt a:hover{color: var(---bgcolor);}
p{text-shadow: none;}
.latestholder{background: #ffffff;padding: 1rem;}
.latestcont{border-bottom: 2px solid rgb(230,230,230,0.500);}
.latestcap{position: relative;top:0;left: 0;margin: 0;}
.latestcap a{display:block; font-size: 24px;font-weight: 500;color:var(---color);text-shadow:0.5px 0.5px 0.5px  var(---bgcolor);--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1em;margin-bottom: 0px;}
.latestcap a:hover{color: var(---bgcolor);}
.latestcap p{font-size:21px;--max-lines:3;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.3em;font-weight: 400;}
.latimg{width:40%;height: 20vh;float:left;margin-right: 1.3rem;overflow-y: hidden;}
.latimg .lecim{width: 100%;object-fit: cover;height: 100%;}
.mancapt a{display: block;text-align: center;padding: 1rem 0rem;font-size: 24px;color:var(---color);font-weight: 500;}
.mancapt p{padding: 0px 5px; text-align: center;font-size: 21px;font-weight: 400;}
.rubcontent{display: grid;grid-template-areas: 'contleft contleft contleft contleft '
                                                'contright contright contright contright';}
 .contleft{grid-area: contleft;}                                               
 .contright{grid-area: contright;}  
 .contleftbody p{font-size: 21px;font-weight: 300;}
 .cardcaption a{display: block;font-size: 24px;font-weight: 600;color: var(---color);padding: 15px 0px;} 
 .cardcaption p{font-size: 21px;margin: 0;--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.3em;font-weight: 400;} 
 .missinimg{background-position: center;background-size: cover;background-repeat: no-repeat;width: 100%;
  height: 35vh;}
  .misim{width:100%;object-fit:cover;object-position: center;}
  .micaption a{display: block;font-size: 24px;font-weight: 600;color: var(---color);text-shadow: 0.5px 0.5px 0.5px var(---bgcolor);padding: 5px;--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.2em;}
  .micaption .btn{background:var(---bgcolor);color: #ffffff;padding: 10px;box-sizing: content-box;border-radius: 10px;float: right;}
  .micaption .btn:hover{background: black;} 
  .micaption p{font-size: 21px;font-weight: 400;}   
  .article{display: grid;grid-template-areas: 'artleft artleft artleft artleft '
    'artright artright artright artright';}    
    .artleft{grid-area: artleft;} 
    .artimg{width: 100%;height: 50vh;overflow-y: hidden;margin-bottom: 2rem;background-size: 100% 50%;background-position: center;background-repeat: no-repeat;}
.artim{width: 100%;height:auto;object-fit: contain;object-position: center;}    
.artcaption{padding:1rem 1rem;}
.arttitle{font-weight:600;font-size: 24px;text-transform: capitalize;}
.artcaption a{text-transform: capitalize;line-height: 1.5em;}    
.fopar p{color:#f1f1f1;font-size: 21px;font-weight: 300;line-height: 1.5em;}
.fohead a{font-size:24px;font-weight: 400;color:var(---color);margin-bottom: 20px;}
.location blockquote {font-size: 21px;color:#ffffff;margin:10px 0px ;padding:0;font-weight: 300;display: flex; gap:20px;}
.location blockquote .fa{font-size: 26px;margin-top: 7px;}
.folink ul li a{display:block;color:#f1f1f1;padding: 5px;gap: 4px;font-size: 21px;}
.folink ul li a .fa{margin-right: 2px;}

 }
 
  @media only  screen and (max-width:500px)
 {
   .container{padding: 0;}
  .topbox{display: grid;grid-template-areas: 'topbox-a topbox-a topbox-a topbox-a ' 
    'topbox-b topbox-b topbox-b topbox-b ' ;}

.topbox-a{grid-area: topbox-a ;display:none;} 
.topbox-b{grid-area: topbox-b;place-items: center;}  
.topbox-b ul{float:none;} 
.topbox-a .location{display: flex;gap:10px;}                                      
.topbox-a .location blockquote{font-size: 16px;font-weight: 400;}
.hcheader{display: flex;justify-content: space-between;align-items: center;}
.hcrightmenu{flex:calc(15%);width: 100%;}
.hclogo{flex:calc(85%);width: 100%;padding-top:30px;overflow-y: hidden;}
.logoim{width: 100%;object-fit:cover;height: 100%;}
.hcrightmenu .fa-bars{display: block;font-size: 32px;position: relative;margin: 0;padding-top:20px;padding-bottom: 70px;}
.hcrightmenu:hover  .menu{display: block;float:left;position:absolute;z-index: 1000;}
                                             .menu{list-style: none;position: relative;right:13rem;display: none;background-color: var(---bgcolor);width: 33%;}
                                             .menu .listmenu{cursor: pointer;display: inline;gap:10px;margin-top: 20px;}
                                             
                                             .menu .listmenu .item{display: block;color:var(---color);padding:0em 0em 1.3em 0em;font-weight: 600;transition: transform 3s ease-in-out;}
                                             .menu .listmenu .item:hover{color:black;border-bottom: 3px solid #f1f1f1;}
                                             .listmenu:hover .submenu{display: block;width: 100%;animation: move 3s ease-in-out forwards 3s;}
                                             @keyframes move{
                                             1.2%{
                                             transform: translateY(1.2%);
                                             }
                                             }
                                             .submenu{display:none;position: absolute;z-index:1000;list-style: none;padding: 0;top:3rem;left: 10.4em;}
                                             .submenu .sublist{padding: 0; margin: 0;border-bottom: 1px solid  #f1f1f1;background:var(---bgcolor);z-index: 1000;}
                                             .sublist a{display: block;padding:8px 0px 8px 5px;color:#f1f1f1;font-weight: 500;animation: move 1s ease-in;transition:2s;}
                                             .submenu .sublist:last-child{border:none;}
                                             .sublist:hover{background: var(---bgcolor);border-bottom: 2px solid black;}
                                             

                                             .sliders, .wrap , .slide , .slide-content{
                                              padding: 0;
                                              margin: 0;
                                              width: 100%;
                                              height: 40vh;
                                              overflow-x: hidden;
                                              overflow-y: hidden;
                                          }
                                          .wrap{
                                              position: relative;
                                          }
                                          
                                          .slide-content{
                                              display: flex;
                                              flex-direction: column;
                                              justify-content: center;
                                              align-items: center;
                                              position: absolute;
                                              top:-0px;
                                              margin-top: -0px;
                                              background-color:rgb(0,0,0,0.500);
                                          }
                                           .slide-content .caption{
                                              display: flex;
                                              justify-content: center;
                                              align-items: left;
                                              flex-direction: column;
                                              margin-top: -2em;
                                              width:50vw;
                                              transition: width 2s;
                                              
                                          }
                                          .caption .btn{background:black;width:50%;padding: 0.5em;color: #f1f1f1;;font-weight: 500;text-align: center;border-radius: 10px;}
                                          .caption .btn:hover{background:rgb(11, 50, 92) ;}
                                          .title{font-size: 16px;font-weight:600; color: #fff;box-shadow: 1px 1px 2px solid rgb(30, 96, 165);}
                                          .slide p{font-size:14px; color: #fff;opacity: 1;font-weight: 400;}
                                          .arrow{cursor: pointer;position:absolute; top: -80%; margin-top:80%;width: 0;height: 0;z-index:3;text-align: center;padding: 20px;background-color: #fff;
                                                 border-radius: 50%;
                                               }
                                          .arrow:hover{background:rgb(6, 44, 85) ;color: #fff;}
                                          .left-arrow{margin-left: 30px;}
                                          .right-arrow{right:0;margin-right: 30px;}
                                          .finatit{width:100%;margin: 0;}
                                          .finatit{font-size: 24px;font-weight: 700;margin: 0;}
                                          .finatit p{padding: 2rem 0rem;font-size: 18px;font-weight: 400;text-shadow:1px 1px 1px var(---bgcolor);} 
.agim{display: none;}
.imageg{width:100%;height: 40vh;}
.imag{width:100%;object-fit: cover;}
.agricapt{margin-top: 5rem;padding:1rem;}
.agricapt a{font-size:16px;font-weight: 500;color:#f1f1f1;display: block;margin-bottom: 10px;}
.agricapt a:hover{color: var(---bgcolor);}
.agricapt p{font-size: 14px;font-weight: 400;color:#f1f1f1;
  --max-lines:4;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.3em;margin: 0;
}
.finaim{width:100%;height: 35vh;background-size: cover;background-position: center;}
.fim{width:100%;object-fit: cover;}
.finacapt{padding:1rem 0.5rem;}
.finacapt a{display: block;font-size: 24px;font-weight: 600;place-items: center;color: var(---color);}
.finacapt a:hover{color:var(---bgcolor)}
.finacapt p{font-size: 20px;font-weight: 400;}
.shortimg{background-position: center;background-size: cover;width:100%;height:35vh;float:left;}
.shortim{width:100%;height: 100%;object-fit: cover;}
.shortcapt p {padding: 0px 5px;text-shadow:1px 1px 1px #333;font-weight: 400;font-size: 21px;text-shadow: none;}
.shortcapt a{display: block;padding: 4px 5px;font-size: 24px;font-weight: 500;text-shadow:1px 1px 1px var(---bgcolor);color: var(---color);--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.2em;}
.shortcapt a:hover{color: var(---bgcolor);}
p{text-shadow: none;}
.latestholder{background: #ffffff;padding: 1rem;}
.latestcont{border-bottom: 2px solid rgb(230,230,230,0.500);}
.latestcap{position: relative;top:0;left: 0;margin: 0;}
.latestcap a{display:block; font-size: 24px;font-weight: 500;color:var(---color);text-shadow:0.5px 0.5px 0.5px  var(---bgcolor);--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1em;margin-bottom: 0px;}
.latestcap a:hover{color: var(---bgcolor);}
.latestcap p{font-size:21px;--max-lines:3;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.3em;font-weight: 400;}
.latimg{width:40%;height: 20vh;float:left;margin-right: 1.3rem;overflow-y: hidden;}
.latimg .lecim{width: 100%;object-fit: cover;height: 100%;}
.mancapt a{display: block;text-align: center;padding: 1rem 0rem;font-size: 24px;color:var(---color);font-weight: 500;}
.mancapt p{padding: 0px 5px; text-align: center;font-size: 21px;font-weight: 400;}
.rubcontent{display: grid;grid-template-areas: 'contleft contleft contleft contleft '
                                                'contright contright contright contright';}
 .contleft{grid-area: contleft;}                                               
 .contright{grid-area: contright;}  
 .contleftbody p{font-size: 21px;font-weight: 300;}
 .cardcaption a{display: block;font-size: 24px;font-weight: 600;color: var(---color);padding: 15px 0px;} 
 .cardcaption p{font-size: 21px;margin: 0;--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.3em;font-weight: 400;} 
 .missinimg{background-position: center;background-size: cover;background-repeat: no-repeat;width: 100%;
  height: 35vh;}
  .misim{width:100%;object-fit:cover;object-position: center;}
  .micaption a{display: block;font-size: 24px;font-weight: 600;color: var(---color);text-shadow: 0.5px 0.5px 0.5px var(---bgcolor);padding: 5px;--max-lines:2;display:-webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: var(--max-lines);line-height: 1.2em;}
  .micaption .btn{background:var(---bgcolor);color: #ffffff;padding: 10px;box-sizing: content-box;border-radius: 10px;float: right;}
  .micaption .btn:hover{background: black;} 
  .micaption p{font-size: 21px;font-weight: 400;}   
  .article{display: grid;grid-template-areas: 'artleft artleft artleft artleft '
    'artright artright artright artright';}    
    .artleft{grid-area: artleft;} 
    .artimg{width: 100%;height: 50vh;overflow-y: hidden;margin-bottom: 2rem;background-size: 100% 50%;background-position: center;background-repeat: no-repeat;}
.artim{width: 100%;height:auto;object-fit: contain;object-position: center;}    
.artcaption{padding:1rem 1rem;}
.arttitle{font-weight:600;font-size: 24px;text-transform: capitalize;}
.artcaption a{text-transform: capitalize;line-height: 1.5em;}    
.fopar p{color:#f1f1f1;font-size: 21px;font-weight: 300;line-height: 1.5em;}
.fohead a{font-size:24px;font-weight: 400;color:var(---color);margin-bottom: 20px;}
.location blockquote {font-size: 21px;color:#ffffff;margin:10px 0px ;padding:0;font-weight: 300;display: flex; gap:20px;}
.location blockquote .fa{font-size: 26px;margin-top: 7px;}
.folink ul li a{display:block;color:#f1f1f1;padding: 5px;gap: 4px;font-size: 21px;}
.folink ul li a .fa{margin-right: 2px;}


 }