/*------------------------

Theme Name: ARSD Buis
   version: 1.0

-----------------------------*/




@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');




/*------------------------------------------
            
			
		+++++ Basic settings+++++
			  
			 
-------------------------------------------*/


html {
    scroll-behavior: smooth;
}

          body {
                font-family: 'Open Sans', sans-serif; /*---Basic Font family------*/              
               }


            h1, h2, h3, h4, h5, h6 {
                    font-family: "Noto Sans", sans-serif; /*---Basic Title Font family------*/
               }


                              a, a:hover {
                                     text-decoration: none; /*---Link underline remove------*/
                                      }


/*----------------------------------------

    ++++Fix the Container Width+++

-----------------------------------------*/

     .container {
               min-width: 70%; /*----Container minimum width that will be mantain---*/
               max-width: 80%; /*----Container maximum width that will be mantain---*/
       }



/*------------------------------------------
            
			
		    +++++ Menu Background +++++
                   Top Menu
			  
			 
-------------------------------------------*/

                                            /*------------------------------------------------------------------------
                                                   ***Menu Background, Dropdown menu Background,Dropdow Item Background
                                                       will be Affected only for Big Screen ( minimum 768px )
                                                   ***This Background Color will be changed  after Scroll      
                                            ------------------------------------------------------------------------*/
.navbar,  /*--Menu Background Color--*/
.navbar .dropdown-menu, /*--dropdown menu Background---*/
.navbar .dropdown-menu a:hover ,
.navbar .dropdown-menu .active { /*---dropdown Menu item background color when hover -----*/
        background-color: transparent !important; /*----Menu Background Color(on Big Screen)-----------*/
}


/*---------------------------------------------------------------
            
			
		+++++ Menu Background  only for big screen  +++++
			  
			 
-----------------------------------------------------------------*/

                                               /*------------------------------------------------------------------------
                                                   ***for Menu Background only for Big Screen ( minimum 768px )
                                                           add some padding and Bottom Border
                                                   ***for Dropdown Menu only for Big Screen ( minimum 768px )  
                                                                 remove all Border
                                               ------------------------------------------------------------------------*/

@media screen and (min-width:1000px){ /*-----Media Quary Start-------*/

             .navbar .container-fluid{ /*----Menu  (on big Screen)-----------*/
               width: 95%;
                     padding: 0.5vw 0pt; /*------Menu Top and Bottom Height (on Big Screen)-------*/
               border-bottom: 1px solid rgba(255,255,255 ,0.1); /*------Menu  Bottom  Border (on Big Screen)-------*/
                                         
                }

             .navbar .dropdown-menu {
                      border: none; /*------Remove dropdown menu border-------*/
                         }

}/*-----Media Quary End-------*/



/*---------------------------------------------------------------
            
			
		+++++ Menu Background  only for small screen  +++++
			  
			 
-----------------------------------------------------------------*/

                                            /*------------------------------------------------------------------------
                                                   ***Menu  only for small Screen ( maximum 992px )
                                                           i)Menu will be fixed in top
                                                          ii)Menu Item will stay in center
                                                         iii)Menu Background Color will be like after scroll Backround Color 
                                                          iv)Add some padding and margin
                                               ------------------------------------------------------------------------*/


@media screen and (max-width: 992px) {  /*-----Media Quary Start-------*/

             .navbar {        /*----Menu  (on Small Screen)-----------*/      
                               position: absolute; /*---on small sreen menu will be fixed on top position-----*/ 
                                  width: 100%; /*-----On Small screen menu will take full width ------*/
						            top: 0;/*----on small screen menu will be fixed on Top-----*/
					         text-align: center; /*--On small screen menu item will be in center position--*/
			           background-color: #0E0E57 !important; /*----On small screen menu Background Color-----*/
			                    padding: 3vw; /*-----On Small screen menu top and bottom extra width-----*/
                          margin-bottom: 5vw;  
						  }

            }/*-----Media Quary End-------*/

/*---------------------------------------------------------------
            
			
		+++++ Menu Background  when scrolled and  
            available for only  big screen  +++++
			  
			 
-----------------------------------------------------------------*/




              .navbar:is(.scrolled),           /*----Menu Background color when scrolled |scrolled  class is defined in j-query -----------*/ 
              .navbar:is(.scrolled) .dropdown-menu, /*---- dropdown Menu Background and border when scroll-----------*/ 
              .navbar:is(.scrolled) .dropdown-menu a:hover {
                                      background-color:#0E0E57 !important; /*-----on scrolled background color---*/
                                                border:none; /*----on scrolled remove border ------*/
                                }             
						  
                                .navbar:is(.scrolled) .container-fluid{
                                    border: none;
                                }

/*------------------------------------------

          ++++ Menu   Logo +++

-------------------------------------------*/

             .navbar  img{ 
                         width:clamp(80pt,15vw,170pt); /*---------Logo width in different device-----------*/
			              object-fit:cover; /*--Logo size resize---*/
			            }



/*------------------------------------------

          +++ Menu Item +++

-------------------------------------------*/

.navbar a,
.navbar .dropdown .show {
                font-size: clamp(10pt,2vw,11pt); /*----Menu font size-----*/
                    color: #ffffff; /*----Menu Font color----*/
           text-transform: capitalize; /*----Ment font style----*/
              font-weight: normal; /*----Menu Font width-----*/
           letter-spacing: 0.5pt; /*---Menu font letter spacing----*/
         }

    .navbar a:hover,
    .navbar a:focus {
                    color: #00E000; /*-----Menu Font when hover----*/
           }


.navbar .active:not(.dropdown-toggle) {
                    color: #00E000; /*-----Menu Font when active----*/
                    }


/*-------------------------------------------------------------------

          ++++ Dropdown Menu only available for small screen +++

-------------------------------------------------------------------*/

@media screen and (max-width: 992px) {  /*-----Media Quary Start-------*/
        .navbar .dropdown-menu a{ /*-----Dropdown menu on small screen------*/
               text-align: center;/*--------on small screen dropdown menu item will be on center-------*/
            }

.navbar .dropdown-menu{ 
                   border: none; /*---Remove border On small screen dropdown menu----*/
         }
  }/*-----Media Quary End-------*/




/*--------------------------------------------------------------

       Small Screen Button | Button to show menu | 
          button only available in small screen

---------------------------------------------------------------*/

                                              /*------------------------------------------------------------------------
                                                        ***Ham berger  Button ( maximum 768px )***
                                                           i)Remove Button Border,Remove shadow
                                                          ii)'X' button will be available after clicking Hamberger Button
                                                        
                                               ------------------------------------------------------------------------*/

.navbar .navbar-toggler {
                        border: none; /*--on small screen collapse button border remove---*/
					}
     .navbar  .navbar-toggler i{
                                 color: #E100BB !important; /*----On small screen collapse button color-----*/
				             font-size: 18pt; /*------On small screen Collapse button size------*/
				           }

          .navbar .navbar-toggler .close {
                                  display: none; /*----On small screen 'X' button is invisible | after clicking 'Hamburger' button 'X' button will be displayed-------*/
                              }
    .navbar .navbar-toggler:focus {
                       outline: none !important; /*------remove outline of Collapse button On small screen  ---------*/
                    box-shadow: none !important;/*----remove shadow of collapse button on small screen-----*/
                   }


/*-----------------------------------------

             Menu Social Icon 

------------------------------------------*/ 

                                      /*------------------------------------------
                                          Right Side Social media is only 
                                             available in Big Screen
                                      --------------------------------------------*/


.navbar .btn-square { 
                        border: 2px solid #ffffff; /*-----Social Icon border------*/
			             color: #ffffff; /*----Social Icon Color--------*/
                    transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955) ;/*-------Social button transform on click animation---------*/
                       display: flex;
               justify-content: center;
                   align-items: center;
                         width: 25pt;
                        height: 25pt;
                  margin-right: 5pt;
						 }
						 
    .navbar .btn-square:hover {
                    background-color: #ffffff; /*-----Social button background color on hover------*/
			                   color: #E100BB;/*------Social icon color on hover------------*/
						 }						 


              .navbar .btn-square i{ 
                           font-size: clamp(8pt,1vw,9pt);/*-------Social Icon font size---------*/
                     }



/*---------------------------------------------

          +++Hero Section ( Front Page )+++

-----------------------------------------------*/ 


                       
                              /*----------------------------
                                  Fix the slide position
                              -----------------------------*/
                         
.HeroSection .carousel-item {        /*----adjust Slide Height and Width-----*/  
                transition: opacity ease-out 0.5s;  /*----slide image change with opacity-----*/ 
                    height: clamp(250pt,60vw,550pt); /*---- Slide Height -----*/ 
                     width: 100%; /*--Slide Full Width---*/
                  position: relative; 
                text-align: center; 
                 isolation: isolate; 
                   z-index: 1;
}

                               /*--------------------------------
                                    fix slide Image position
                              -----------------------------------*/


  .HeroSection  img{ /*---- Slide Image||  every image act like a background iamge-----*/ 
                     width: 100%; /*----Slide Image  full width-----*/
                    height: 100%; /*----Slide image take full width-----*/
                  position: absolute;/*-----Slide Image take absolute position----------*/
                       top: 0;
                      left: 0;
                object-fit: cover;
 
               }


                             /*--------------------------------
                                    Change slide Image Color
                              -----------------------------------*/
               
   .HeroSection .slide-bg::after{ /*-----------Backround over slide image || Slide bg is the div that contain slide image---------------*/
                   content: '';
                     width: 100%; 
                    height: 100%;
                  position: absolute;
                       top: 0;
                      left: 0;
          background-color: rgba(0, 0, 0,0.5);     
     background-blend-mode: multiply; 

            }



/*-------------------------------------------------------------

          +++  Slide  Text ( Hero Section--Front Page )+++

--------------------------------------------------------------*/

                              /*--------------------------------
                                        Text Holder
                                    fix slide Text position
                              -----------------------------------*/                
                       

    .HeroSection  .text-box {  /*----Slide Text Holder----*/
              position: absolute;
                   top: 55%; 
                  left: 50%; 
             transform: translate(-50%,-50%); 
     -webkit-transform: translate(-50%,-50%); 
                 width: 100%; 
                }


                              /*--------------------------------
                                         Slide Title-1
                              -----------------------------------*/     

 .HeroSection  h4{ /*-----Section title-1 -------*/ 
                  font-size: clamp(8pt,2vw,11pt);  
                font-family: "Montserrat", sans-serif;     
             text-transform: capitalize;      
                font-weight: normal;
                 text-align: center;
                      color: #62F300;
                      width: clamp(156pt,65%,700pt);
                    display: block;
                     margin: 5pt auto; 
             letter-spacing: 2pt;
                  text-wrap: pretty;
      }


                              /*--------------------------------
                                         Slide Title-2
                              -----------------------------------*/   
                              

.HeroSection  h1{ /*-----Section title-2 -------*/ 
                  font-size: clamp(12pt,5vw,42pt);       
             text-transform: uppercase;      
                font-weight: bolder;
             padding-bottom: 0.5vw; 
                 text-align: center;
                      color: #ffffff;
                      width: clamp(156pt,65%,700pt);
                    display: block;
                     margin: auto; 
             letter-spacing: 2pt;
                  text-wrap: pretty;
 }


                              /*--------------------------------
                                         Slide Text
                              -----------------------------------*/     
 .HeroSection  p{  /*-----Section text-------*/      
               font-weight: normal;
                 font-size: clamp(6pt,2vw,10pt); 
                     color: #cccccc; 
                     width: clamp(212pt,65%,800pt);
                   display: block;
                    margin: auto; 
            padding-bottom: 2vw; 
                 text-wrap: balance;
       
     
}




.HeroSection .btn { /*-----Section Button---------*/

              font-size: clamp(6pt,2vw,12pt);
                padding: clamp(4pt,1vw,10pt) clamp(15pt,3vw,30pt);
                 border: none;
          border-radius: 30px;
         text-transform: uppercase;
            font-weight: bolder;
             box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);

}

.HeroSection .btn1 ,
.HeroSection .btn1:hover,
.HeroSection .btn1:active{ /*-----hero section Button 1 ---------*/
                 border: none;    
       background-color: #ffffff;                 
             box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
    
}

    .HeroSection .btn1 a,
    .HeroSection .btn1 a :hover { /*-----hero section Button 1  when hover---------*/
                  color: #E100BC;
    }


.HeroSection .btn2,
.HeroSection .btn2:hover,
.HeroSection .btn2:active { /*-----hero section Button  2 ---------*/
                 border: none;
       background-color: #E100BC;
             box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);

}
    .HeroSection .btn2 a,
    .HeroSection .btn2 a:hover { /*-----hero section Button  2 when hover---------*/
                  color: #ffffff;
        
    }

 
/*-------------------------------------------------

                 +++About Section++ 
          ( For Front page  and About us page )

--------------------------------------------------*/

.about-section {                 
                overflow: hidden; /*-----Not item can exit this section ( Left or right margin) ----------*/
   }


/*---------------------------------------------------------------

                        main Row 
             ( About Section -- available in 
               Front Page and about us page )

----------------------------------------------------------------*/						 
               
.about-section .g-5{ /*-----row style only if has  image-------------*/
                 display: flex;
         justify-content: center  ; 
                 padding: 6vw 0pt;
}

/*---------------------------------------------------------------

                       Main Column
             ( About Section -- available in 
               Front Page and about us page )

----------------------------------------------------------------*/	

.about-section .col-12:not(.img-block){ /*-----Column padding not for image-------------*/
             padding-left: 4vw;
}

@media screen and (max-width: 1200px) { /*-----Media Quary for maximum 1200px but more than 768px start here---------*/

.about-section .col-12:not(.img-block){ /*-----Colum padding not for image-------------*/
              padding-top: clamp(10pt,3.5vw,50pt);
            }
}/*-----Media Quary for maximum 1200px but more than 768px End here---------*/


/*---------------------------------------------------------------

                Section Title and Text 
      ( About Section -- available in Front Page 
                 and about us page )

----------------------------------------------------------------*/


.about-section h4:not(.count-number) {   /*-----Title1-------------*/
          text-transform: uppercase;  
                   color: #00AB00;    
             font-weight: normal;
               font-size: clamp(10pt,2vw,11pt);
             font-family: "Montserrat", sans-serif;
               text-wrap: pretty;
               
             }

.about-section h1:not(.count-number) {  /*-----Title2-------------*/
               font-size: clamp(21pt,3vw,36pt);  
          text-transform: capitalize;  
                   color: #000000;    
             font-weight: bolder;
          padding-bottom: 1vw;
               text-wrap: pretty;
             }
      
      
.about-section  p:not(.count-number) {  /*-----Text-------------*/    
             font-weight: normal;
               font-size: clamp(8pt,2vw,10pt);  
                   color: #6a737b;
               text-wrap: pretty;

               }



/*---------------------------------------------------------------

                         Image
             ( About Section -- available in Front Page 
                   and about us page )

----------------------------------------------------------------*/	

.about-section  .img-block{ /*---- left column image holder or div-----*/
                position: relative;
                  height: clamp(250pt,60vh,420pt);

        } 


       
.about-section iframe{ /*----- Image of left column-------------*/
                  height: 85%;
                   width: 80%;  
                position: absolute;
              object-fit: cover; 
                     top: 15%;
                    left: 15%;
                  border: clamp(10pt,4vw,15pt) solid #DA00B6;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      
     
           }


@media screen and (max-width: 768px) {  /*---Media Quary only for ( Small Screen->maximum 768px ) Start here-----------*/ 

 .about-section iframe{ /*----- Image-------------*/
                  height: 85%;
                   width: 90%;  
                     top: 10%;
                    left: 10%;          
            }

}/*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/ 



/*---------------------------------------------------------------

                Create a box behind the image
         ( About Section -- available in Front Page 
                     and about us page )

----------------------------------------------------------------*/	
 
.about-section   .box{   /*------rectangle behind the image|| Create a rectangle before the Image-------*/
                     top: 3%;
                  height: 110%;
                   width: 50%; 
        background-color:  #986C48; 
                  border: clamp(10pt,4vw,15pt) solid    #7C420E; 
                position: absolute;  
                 z-index: -1;   


}



@media screen and (max-width: 768px) {  /*---Media Quary only for ( Small Screen->maximum 768px ) Start here-----------*/ 
.about-section   .box{
                  height: 100%;
                   width: 50%;
                    left: -1%;

   }
}/*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/ 




/*---------------------------------------------------------------

                        About Button
           ( About Section -- available only in Front Page  )

----------------------------------------------------------------*/

.about-section .btn {
            margin-top: 1vw;
               padding: clamp(4pt,1vw,10pt) clamp(15pt,3vw,30pt);
                border: none;
         border-radius: 30px;
      background-color: #DB00B7;
                 color: #ffffff;
  
             font-size: clamp(8pt,2vw,11pt);
        text-transform: uppercase;
           font-weight: bolder;
            box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
}

.about-section .btn:hover,
.about-section .btn:active {
                 color: #ffffff;
      background-color: #DB00B7;
}

/*---------------------------------------------------------------

                 Count number Row
       ( About Section -- available in Front Page 
                 and about us page )

----------------------------------------------------------------*/

                                  /*----------------------------
                                      Number Counter Row
                                  ------------------------------*/

.about-section .g-5 .row{               
                        display: flex;
                        display: -webkit-flex;
                justify-content: center;
        -webkit-justify-content: center;
                     margin-top: 20pt;
                     text-align: center;

}


/*---------------------------------------------------------------

              Count Number
( About Section -- available in Front Page 
           and about us page )

----------------------------------------------------------------*/

                                 /*----------------------------
                                      Number Counter Digit
                                  ------------------------------*/
.about-section .count-number .count {
                      font-size: clamp(16pt,3vw,21pt);
                     text-align: center;
                          color: #7C420E;
                    font-weight: bolder;
                    
}



/*---------------------------------------------------------------

              Count Number Title
( About Section -- available in Front Page 
           and about us page )

----------------------------------------------------------------*/

                                  /*----------------------------
                                      Number Counter Title
                                  ------------------------------*/
.about-section .count-number .text {
                      font-size: clamp(8pt,2vw,10pt);
                 text-transform: capitalize;
                     text-align: center;
                          color: #986C48;
                    font-family: "Montserrat", sans-serif;
                      text-wrap: pretty;
}



/*-----------------------------------------------

         +++ service-section ( Front Page)+++

-------------------------------------------------*/

   .service-section {
                      overflow: hidden; /*------Section Item Cant exit left and right Margin------------*/
         }
  


  @media screen and (min-width: 768px) { /*---Media Quary start here---------*/
  
   .service-section {              /*----in Big screen ( Minimum width 768px ) all text will stay in cente-----*/
                    text-align: center;  /*----in small screen ( Maximi width 768px ) all text will stay in cente-------*/
       }
  
  } /*---Media Quary end here---------*/
  
  
  /*---------------------------------------------------------------
  
                         Section Title 
           ( .service-sectio -- available in Front page )
  
  ----------------------------------------------------------------*/

  .service-section .section-title1 { /*-----Section Title1-------------*/
                  text-transform: uppercase;  
                           color: #02E500;    
                     font-weight: normal;
                       font-size: clamp(10pt,2vw,11pt);
                     font-family: "Montserrat", sans-serif;
                       text-wrap: pretty;
                          
     
  }
  
  .service-section .section-title2 { /*-----section Title2-------------*/
                       font-size: clamp(21pt,3vw,36pt);  
                  text-transform: capitalize;  
                           color: #000000;    
                     font-weight: bolder;
                  padding-bottom: 1vw;
                       text-wrap: pretty;
     
  }


/*---------------------------------------------------------------
  
                            Section Text
           ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/


  .service-section .section-text { /*-----Section text-------------*/
                     font-weight: normal;
                       font-size: clamp(9pt,2vw,10pt);  
                           color: #6a737b; 
                  padding-bottom: 1vw;
                       text-wrap: pretty;
                       
  }
  
  @media screen and (min-width: 768px) { /*----on minimum width 768px  all text will stay in center-------*/
    .service-section .section-text {
                           width: clamp(180pt,80%,612pt);
                         display: block; 
                          margin: auto;
                        }
  
  }


   /*---------------------------------------------------------------

         Section main Row
( service-section -- available in service page )

----------------------------------------------------------------*/


.service-section .row { /*-----all item under Row will take center position------------*/
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    padding-top: 1vw;
}

/*---------------------------------------------------------------

Section main Column
( service-section -- available in service page )

----------------------------------------------------------------*/
.service-section .col-12 {
    max-width: 350pt;
    margin-bottom: 2vw;
}



/*---------------------------------------------------------------

     Card
( service-section -- available in service page )

----------------------------------------------------------------*/

.service-section .card {
    border-radius: 20pt;
    background-color: #0748A7;
    width: 100%;
    min-height: 450pt;
    padding: 30px 10px;
    border: 10px solid #DA00B6;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
}





/*---------------------------------------------------------------

      Card Body
( service-section -- available in service page )

----------------------------------------------------------------*/


.service-section .card-title {
    font-size: clamp(12pt,2vw,16pt);
    font-weight: 700;
    text-transform: capitalize;
    text-align: center;
    color: #ffffff;
    text-wrap: pretty;
}


.service-section .card-text {
    font-size: clamp(9pt,2vw,10pt);
    color: #c4dff6;
    text-align: center;
    text-wrap: pretty;
}


.service-section img {
    width: 100%;
    height: 180pt;
   
object-fit: cover;
box-shadow: 0 5px 12px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   
    margin: 10pt 0 10pt 0;
    
    border: 5px solid #ccc;
}


/*---------------------------------------------------------------

      Offer Button
( service-section -- available in Front page )

----------------------------------------------------------------*/

.service-section a {
    display: inline-flex;
    align-self: center;
    padding: 10px 25px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: clamp(8pt,2vw,11pt);
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
    border: 2px solid #DA00B6;
    background-color: #DA00B6;
    color: #ffffff;
    margin-top: 10pt;
}

/*---------------------------------------------

                 *Presentation Section*
                available in Front page 
-----------------------------------------------*/

.presentation-section {/*-----Background Style-------------*/
              background-image: url(../img/presentation.jpg); 
           background-position: center center; 
         background-attachment: fixed; 
             background-repeat: no-repeat; 
               background-size: cover; 
              background-color: rgba(51, 82, 56,0.55); 
         background-blend-mode: multiply;
                    object-fit: cover;    
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
                        margin: 2vw ;
                        border: 10px solid #ffffff;
                      overflow: hidden;
                      position:relative;
                       padding: 8vw 0pt;
}


    /*---------------------------------------------------------------
  
                       Section main Row
          ( presentation-section -- available in Front page )
  
----------------------------------------------------------------*/
    .presentation-section .row { /*-----Row Style-------------*/
                       display: flex;
                       display: -webkit-flex;
                   align-items: center;
           -webkit-align-items: center;
               justify-content: center;
       -webkit-justify-content: center;
    }


/*---------------------------------------------------------------
  
                       Section Column
          ( presentation-section -- available in Front page )
  
----------------------------------------------------------------*/


.presentation-section .col-12{/*-----Column Style-------------*/
                 margin-bottom: 1vw;
}

.presentation-section .offer-col {
                    text-align: right;
}
.presentation-section .presentation-col {
                    text-align: left;
}

    .presentation-section .video-col {
                       display: flex;
                       display: -webkit-flex;
                   align-items: center;
           -webkit-align-items: center;
               justify-content: center;
       -webkit-justify-content: center;
    }

    @media screen and (max-width: 768px) { /*-----Media Quary Start-------*/
        .presentation-section .presentation-col {
                    text-align: center;
                   padding-top:20pt;
    }
}

    .presentation-section h2 { /*-----Title left side  Style-------------*/
          font-size: clamp(11pt,2vw,21pt);
              color: #ffffff;
       
     padding-bottom: 1vw;
          text-wrap: pretty;
     text-transform: capitalize;
     letter-spacing: 1pt;
       word-spacing: 3pt;
    }

    .presentation-section p { /*-----Text right side  Style-------------*/
        text-transform: initial;
             font-size: clamp(9pt,2vw,14pt);
                 color: #ffffff;
                 
    }

    .presentation-section .video {
              position: absolute;
                  left: 0;
                   top: 0;
             min-width: 100%;
            min-height: 100%;
    }

    .presentation-section .video{
               display: none;
                height: 100%;
                 width: 100%;
            object-fit: cover;
    }

    .presentation-section .play-btn { /*-----Video display button--------*/
                   width: clamp(40pt,5vw,100pt);
                  height: clamp(40pt,5vw,100pt);
        background-color: #DB12BA;
           border-radius: 50%;
                position: relative;
                 display: block;
                  margin: auto;
              box-shadow: 0px 0px 25px 3px rgba(255, 235, 255, 0.8);
    }

        .presentation-section .play-btn::after { /* create triangle */
                 content: "";
                position: absolute;
                    left: 50%;
                     top: 50%;
       -webkit-transform: translateX(-40%) translateY(-50%);
               transform: translateX(-50%) translateY(-50%);
        transform-origin: center center;
                   width: 0;
                  height: 0;
              border-top: 15px solid transparent;
           border-bottom: 15px solid transparent;
             border-left: 25px solid #fff;
                 z-index: 100;
      -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
              transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }


        .presentation-section .play-btn:before { /* pulse wave */
                           content: "";
                          position: absolute;
                             width: 150%;
                            height: 150%;
           -webkit-animation-delay: 0s;
                   animation-delay: 0s;
                 -webkit-animation: pulse_animate 2s;
                         animation: pulse_animate 2s;
 -webkit-animation-iteration-count: infinite;
         animation-iteration-count: infinite;
                           opacity: 1;
                     border-radius: 50%;
                            border: 5px solid rgba(255, 255, 255, .75);
                               top: -25%;
                              left: -25%;
                        background: rgba(121, 96, 254,.08);
        }




/*-----------------------------------------------

         +++ member-section)+++

-------------------------------------------------*/

   .member-section {
                      overflow: hidden; /*------Section Item Cant exit left and right Margin------------*/
                      padding-top: 2vw;
         }
  


  @media screen and (min-width: 768px) { /*---Media Quary start here---------*/
  
    .member-section {              /*----in Big screen ( Minimum width 768px ) all text will stay in cente-----*/
                    text-align: center;  /*----in small screen ( Maximi width 768px ) all text will stay in cente-------*/
       }
  
  } /*---Media Quary end here---------*/
  
  
  /*---------------------------------------------------------------
  
                         Section Title 
           ( member-section -- available in Front page )
  
  ----------------------------------------------------------------*/

  .member-section .section-title1 { /*-----Section Title1-------------*/
                  text-transform: uppercase;  
                           color: #02E500;    
                     font-weight: normal;
                       font-size: clamp(10pt,2vw,11pt);
                     font-family: "Montserrat", sans-serif;
                       text-wrap: pretty;
                          
     
  }
  
  .member-section .section-title2 { /*-----section Title2-------------*/
                       font-size: clamp(21pt,3vw,36pt);  
                  text-transform: capitalize;  
                           color: #000000;    
                     font-weight: bolder;
                  padding-bottom: 1vw;
                       text-wrap: pretty;
     
  }


/*---------------------------------------------------------------
  
                            Section Text
           ( member-section -- available in Front page )
  
  ----------------------------------------------------------------*/


  .member-section .section-text { /*-----Section text-------------*/
                     font-weight: normal;
                       font-size: clamp(9pt,2vw,10pt);  
                           color: #6a737b; 
                  padding-bottom: 1vw;
                       text-wrap: pretty;
                       
  }
  
  @media screen and (min-width: 768px) { /*----on minimum width 768px  all text will stay in center-------*/
    .member-section .section-text {
                           width: clamp(180pt,80%,612pt);
                         display: block; 
                          margin: auto;
                        }
  
  }


   /*---------------------------------------------------------------

         Section main Row
( member-section -- available in service page )

----------------------------------------------------------------*/


.member-section .row { /*-----all item under Row will take center position------------*/
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    padding-top: 3vw;
}

  


.member-section .card {
    
   
    width: 100%;
    
    border: 10px solid #00E500;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);
}


    /*-----------------------------------------------------------

                 +++Footer Section++++

--------------------------------------------------------------*/
    .footer-section {
        margin-top: 120pt;
        position: relative;
        width: 100%;
        background: #0E0E57;
        padding: 20px 50px;
    }

        .footer-section .copntainer {
            overflow: hidden;
        }

        .footer-section .row { /*----Footer Row-----*/
            display: flex;
            justify-content: center;
        }

        .footer-section .col-12 {
            padding: 3vw 0.5vw;
        }




        .footer-section h4,
        .footer-section h3, /*------Footer title------------*/
        .footer-section h2,
        .footer-section h1 {
            font-size: clamp(14pt,2vw,18pt);
            color: #ffffff;
            text-transform: uppercase;
            font-weight: bolder;
            padding-bottom: 5pt;
        }

        .footer-section p, /*------Footer Text----------*/
        .footer-section a,
        .footer-section a:hover,
        .footer-section .nav-link,
        .footer-section .nav-link:hover {
            font-size: clamp(11pt,2vw,12pt);
            text-wrap: balance;
        }

            .footer-section p, /*------Footer Text----------*/
            .footer-section a,
            .footer-section a:hover,
            .footer-section .contact .badge i,
            .footer-section .d-inline-flex .text,
            .footer-section .nav-link,
            .footer-section .nav-link:hover {
                color: #D0EFFF;
            }


        .footer-section .nav-link {
            margin-left: 10pt;
        }

        .footer-section .logo { /*-------Footer logo-----------------*/
            width: clamp(150pt,15vw,170pt);
            padding-bottom: 10pt;
            object-fit: cover;
            display: block;
            margin: auto;
        }

    @media screen and (min-width: 768px) {
        .footer-section .logo {
            display: block;
            margin: 0 auto 10pt auto;
        }
    }

    /*-----------------------------------------------------------

          +++Subscribe form  ( Footer Section)++++

--------------------------------------------------------------*/
    .footer-section .subscribe-form {
        position: relative;
        overflow: hidden;
    }

        .footer-section .subscribe-form input { /*---Input box where input the e-mail address to subscribe----*/
            width: 100%;
            padding: 14px 28px;
            background: #dbebfa;
            border: 1px solid #dbebfa;
            color: #0E0E57;
        }

        .footer-section .subscribe-form button { /*---submit button where enter the e-mail address to subscribe----*/
            position: absolute;
            right: 0;
            top: 0;
            background: #0E0E57;
            padding: 13px 20px;
            border: 1px solid #ffffff;
        }

            .footer-section .subscribe-form button i { /*---submit button icon|| submit button's right side icon  ----*/
                color: #fff;
                font-size: 22px;
                transform: rotate(-6deg);
            }




    /*-----------------------------------------------------------

          +++Contact information  ( Footer Section)++++

--------------------------------------------------------------*/

    .footer-section .contact .d-inline-flex { /*------List item make center-------*/
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10pt 0pt 0pt 0pt;
    }

        .footer-section .contact .d-inline-flex .text {
            font-weight: normal;
            font-size: clamp(9pt,2vw,11pt);
            text-wrap: pretty;
        }

    .footer-section .contact .badge {
        width: 30pt;
        height: 30pt;
        margin-right: 15px;
        font-size: clamp(14pt,2vw,18pt);
        display: flex;
        justify-content: center;
        align-items: center;
    }




    /*-----------------------------------------------------------

          +++Social media  ( Footer Section)++++

--------------------------------------------------------------*/

    .footer-section .social-links .btn-square { /*-----Social Icon  Background-------*/
        border: 2px solid #ffffff; /*-----Social Icon border------*/
        transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955); /*-------Social button transform on click animation---------*/
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30pt;
        height: 30pt;
        margin-right: 5pt;
        margin-bottom: 10pt;
    }



    .footer-section .social-links i { /*-----Social Icon -------*/
        font-size: clamp(9pt,2vw,11pt); /*-------Social Icon font size---------*/
        color: #ffffff; /*----Social Icon Color--------*/
    }


    .footer-section .social-links .btn-square:hover { /*-----Social Icon  Background when hover-------*/
        background-color: #ffffff; /*-----Social button background color on hover------*/
    }

        .footer-section .social-links .btn-square:hover i { /*------Social icon color on hover------------*/
            color: #0E0E57;
        }

    /*-----------------------------------------------------------

          +++Wave animation  ( Footer Section)++++
                Create some wave animation

--------------------------------------------------------------*/

    .footer-section .wave { /*-------all wave have same behavior-------------*/
        position: absolute;
        top: -100px;
        left: 0;
        width: 100%;
        height: 100px;
        background: url('../img/wave.png');
        background-size: 1000px 100px;

    }


    /*----Create wave (Wave_Water) and reverse wave (Reverse_Wave_Water) animtion in animate.css-----*/

    .footer-section .waves :nth-child(1) { /*-----Wave1-------*/
        z-index: 1000;
        opacity: 1;
        bottom: 0;
        animation: Wave_Water 4s linear infinite;
    }

    .footer-section .waves :nth-child(2) { /*----Wave2-----*/
        z-index: 999;
        opacity: 0.5;
        bottom: 10px;
        animation: Reverse_Wave_Water 4s linear infinite;
    }


    .footer-section .waves :nth-child(3) { /*-----Wave3---------*/
        z-index: 1000;
        opacity: 0.2;
        bottom: 0;
        animation: Wave_Water 3s linear infinite;
    }


    .footer-section .waves :nth-child(4) { /*------Wave4--------*/
        z-index: 999;
        opacity: 0.7;
        bottom: 20px;
        animation: Reverse_Wave_Water 3s linear infinite;
    }





    /*-----------------------------------------------------------

          +++Bubble  ( Footer Section)++++
             create a bubble animation

--------------------------------------------------------------*/

    .footer-section .dots div { /*----for all bubble div-----*/
        height: clamp(25pt,4vw,30pt);
        width: clamp(25pt,4vw,30pt);
        border: 2px solid rgba(255, 255, 255, 0.7);
        border-radius: 50px;
        position: absolute;
        top: 10%;
        left: 10%;
    }

    .footer-section .dot { /*-------create buble icon---------*/
        height: 10px;
        width: 10px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 20%;
        right: 20%;
    }

    .footer-section .dots div:nth-child(1) {
        top: 20%;
        left: 20%;
        animation: bubble 8s linear infinite;
    }

    .footer-section .dots div:nth-child(2) {
        top: 60%;
        left: 80%;
        animation: bubble 10s linear infinite;
    }

    .footer-section .dots div:nth-child(3) {
        top: 40%;
        left: 40%;
        animation: bubble 3s linear infinite;
    }

    .footer-section .dots div:nth-child(4) {
        top: 66%;
        left: 30%;
        animation: bubble 7s linear infinite;
    }

    .footer-section .dots div:nth-child(5) {
        top: 90%;
        left: 10%;
        animation: bubble 9s linear infinite;
    }

    .footer-section .dots div:nth-child(6) {
        top: 30%;
        left: 60%;
        animation: bubble 5s linear infinite;
    }

    .footer-section .dots div:nth-child(7) {
        top: 70%;
        left: 20%;
        animation: bubble 8s linear infinite;
    }

    .footer-section .dots div:nth-child(8) {
        top: 75%;
        left: 60%;
        animation: bubble 10s linear infinite;
    }

    .footer-section .dots div:nth-child(9) {
        top: 50%;
        left: 50%;
        animation: bubble 6s linear infinite;
    }

    .footer-section .dots div:nth-child(10) {
        top: 45%;
        left: 20%;
        animation: bubble 10s linear infinite;
    }

    .footer-section .dots div:nth-child(11) {
        top: 10%;
        left: 90%;
        animation: bubble 9s linear infinite;
    }

    .footer-section .dots div:nth-child(12) {
        top: 20%;
        left: 70%;
        animation: bubble 7s linear infinite;
    }

    .footer-section .dots div:nth-child(13) {
        top: 20%;
        left: 20%;
        animation: bubble 8s linear infinite;
    }

    .footer-section .dots div:nth-child(14) {
        top: 60%;
        left: 5%;
        animation: bubble 6s linear infinite;
    }

    .footer-section .dots div:nth-child(15) {
        top: 90%;
        left: 80%;
        animation: bubble 9s linear infinite;
    }



    /*-----------------------------------------------------------

                    +++ Copyright++++

--------------------------------------------------------------*/

    .copyright {
        background: #0E0E57; /*----Copyright Background Color-----*/
        border: 1px solid #0E0E57; /*------Copyright border color :: It should be same as background color -----------*/
    }



        .copyright .container {
            border-top: 1px solid rgba(255, 255, 255, .25);
            padding: 5pt 0;
        }

        .copyright p { /*-----Copyright Text-----*/
            font-size: clamp(10pt,2vw,12pt);
            text-transform: capitalize;
            text-align: center;
            color: #c4dff6;
            padding: 15pt 0pt 3pt 0pt;
        }

        .copyright span {
            color: #E101BC; /*-----Copyright highlighted Text-----*/
        }