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

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 {
    /*---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: 768px) {
    /*-----Media Quary Start-------*/

    .navbar {
        /*----Menu  (on big Screen)-----------*/
        padding: 1.5vw 0pt;
        /*------Menu Top and Bottom Height (on Big Screen)-------*/
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        /*------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: #3d1237 !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: #3d1237 !important;
    /*-----on scrolled background color---*/
    border: none;
    /*----on scrolled remove border ------*/
}



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

          ++++ Menu   Logo +++

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

.navbar img {
    width: clamp(50pt, 15vw, 70pt);
    /*---------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: #F2707E;
    /*-----Menu Font when hover----*/
}


.navbar .active:not(.dropdown-toggle) {
    color: #F2707E;
    /*-----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: #F2707E !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: #3d1237;
    /*------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;
    
    
    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: #0dd3ff;
    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: #F2707E;
}


.HeroSection .btn2,
.HeroSection .btn2:hover,
.HeroSection .btn2:active {
    /*-----hero section Button  2 ---------*/
    border: none;
    background-color: #F2707E;
    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: #3369e7;
    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 img {
    /*----- Image of left column-------------*/
    height: 85%;
    width: 80%;
    position: absolute;
    object-fit: cover;
    top: 15%;
    left: 15%;
    border: clamp(10pt, 4vw, 15pt) solid #F27280;
    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 img {
        /*----- 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: #3B9FE5;
    border: clamp(10pt, 4vw, 15pt) solid #0748A7;
    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: #F2707E;
    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: #F2707E;
}

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

                 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: #0647A6;
    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: #3796D9;
    font-family: "Montserrat", sans-serif;
    text-wrap: pretty;
}



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

         +++ offer-section ( Front Page)+++

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

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



@media screen and (min-width: 768px) {
    /*---Media Quary start here---------*/

    .offer-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 
           ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/

.offer-section .section-title1 {
    /*-----Section Title1-------------*/
    text-transform: uppercase;
    color: #3369e7;
    font-weight: normal;
    font-size: clamp(10pt, 2vw, 11pt);
    font-family: "Montserrat", sans-serif;
    text-wrap: pretty;


}

.offer-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 )
  
  ----------------------------------------------------------------*/


.offer-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-------*/
    .offer-section .section-text {
        width: clamp(180pt, 80%, 612pt);
        display: block;
        margin: auto;
    }

}


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


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

/*---------------------------------------------------------------
  
                  Section main Column
          ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/
.offer-section .col-12 {
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    min-height: clamp(300pt, 65vh, 350pt);
    max-width: 250pt;
    border-radius: 20px;
    border-top-left-radius: 70px;
    margin: 10pt;
    background-color: #F2707E;
}



/*---------------------------------------------------------------
  
                           Card
          ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/

.offer-section .card {
    border: none !important;
    border-top: none !important;
    position: absolute;
    inset: 10px;
    border-radius: 10px;
    background-color: #0748A7;
}



/*---------------------------------------------------------------
  
                           Icon Holder
          ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/

.offer-section .icon-box {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 50%;
    height: 140px;
    width: 140px;
    background-color: #F2707E;
}



.offer-section .icon-box::before {
    /*-----Before Card Icon---------*/
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    height: 30px;
    width: 30px;
    border-top-left-radius: 30px;
    background: transparent;
    box-shadow: -5px -5px 0 5px #F2707E;

}




.offer-section .icon-box::after {
    /*-----After Card Icon---------*/
    content: '';
    position: absolute;
    right: -30px;
    top: 0;
    height: 30px;
    width: 30px;
    border-top-left-radius: 30px;
    background: transparent;
    box-shadow: -5px -5px 0 5px #F2707E;

}





/*---------------------------------------------------------------
  
                            Icon 
          ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/

.offer-section .icon {
    position: absolute;
    inset: 10px;
    border-radius: 10px;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(42pt, 3vw, 60pt);
    transition: 1s;
    background-color: #0748A7;
    color: #F2707E;
}


/*---------------------------------------------------------------
  
                            Icon  when hover
          ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/

.offer-section .card :hover .icon {
    /*-----Col1  Icon holder when hover---------*/
    background-color: #F2707E;
    color: #ffffff;
}


/*---------------------------------------------------------------
  
                            Card Body
          ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/

.offer-section .card-body {
    position: absolute;
    top: 150px;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #FFFFFF;
}

.offer-section .card-title {
    font-size: clamp(12pt, 2vw, 14pt);
    font-weight: bolder;
    letter-spacing: 2px;
    text-transform: uppercase;

}

.offer-section .card-text {
    font-size: clamp(8pt, 2vw, 10pt);
    color: #0dd3ff;
    text-wrap: pretty;
}


/*---------------------------------------------------------------
  
                            Offer Button
          ( offer-section -- available in Front page )
  
  ----------------------------------------------------------------*/

.offer-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 #F2707E;
    background-color: #F2707E;
    color: #ffffff;
    margin-bottom: 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, 3vw, 21pt);
    color: #ffffff;
    font-weight: bolder;
    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: #F2707E;
    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);
}



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

                 +++Team section++ 
                 ( For Front page)

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


/*--------------------------------
                                      Team section  
                                  ------------------------------------*/
.team-section {
    padding: 2vw 0pt;
    /*---------Team Section Top and Bottom have some padding-----------------*/
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .team-section {
        text-align: center;
        /*----in Big screen ( Minimum width 768px ) all text will stay in cente-----*/
    }
}

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

        Row and Column ( Team section )
           available in Front page
---------------------------------------------*/
.team-section .main-row {
    margin-top: 4vw;
}

.team-section .row {
    /*-------all item under row will take center position------------*/
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.team-section .col-12 {
    margin-bottom: 1.5vw;
    /*------All column bottom has some margin---------*/
}



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

        Top position Title and text ( Team section )
              available in Front page
------------------------------------------------------------*/


.team-section .section-title1 {
    /*-----Section Title1-------------*/
    text-transform: uppercase;
    color: #1A8DFF;
    font-weight: normal;
    font-size: clamp(10pt, 2vw, 11pt);
    font-family: "Montserrat", sans-serif;
    text-wrap: pretty;
}

.team-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;
}

.team-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) {
    .team-section .section-text {
        width: clamp(180pt, 80%, 612pt);
        display: block;
        margin: auto;
    }
}


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

          Profile Card ( Team section )
           available in Front page

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


.team-section .g-0 {
    /*------Profle Card--------*/
    color: #ffffff;
    border: clamp(10pt, 4vw, 15pt) solid #F27280;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-radius: 5pt;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #0045A6;
    overflow: hidden;
    padding: 10pt 5pt;
}

.team-section .g-0 .col-lg-12 {
    padding: clamp(15pt, 2vw, 30pt) 0pt;
}

.team-section img {
    /*------team member photo-----------*/
    /*---Photo Height----*/
    width: 150pt;
    /*------Photo width---------*/
    height: 150pt;
    object-fit: cover;
    /*--------Photo adjust height and width-------------*/
    border-radius: 50%;
}



.team-section .reponsibility {
    /*-----Staff's Deignation | Title -------------*/
    text-transform: uppercase;
    color: #13B2D4;
    font-weight: normal;
    font-size: clamp(7pt, 2vw, 9pt);
    padding-top: 20pt;
}


.team-section .card-title {
    /*----Team member name--------*/
    font-size: clamp(19pt, 2vw, 21pt);
    font-weight: bolder;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    padding-bottom: 5pt;
}






.team-section .card-text {
    /*------About Team member || Information about team member------*/
    font-size: clamp(8pt, 2vw, 10pt);
    color: #ffffff;
    text-wrap: pretty;
    padding: 0.5vw;
}




.team-section .btn {
    /*-----Team member 'See Profile' Button---------*/
    margin-top: 1vw;
    padding: clamp(10pt, 1vw, 20pt) clamp(15pt, 3vw, 20pt);
    border: none;
    border-radius: 30px;
    background-color: #F2707E;
    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);
}


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

                  * testimonial-section *

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

.testimonial-section {
    padding-top: 10pt;
    overflow: hidden;
    /*----No item can exit this section-----*/
}

.testimonial-section .row {
    /*-----testimonial section main Row---------*/
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

/*------------Column  left side Title1 (Testimonial)----------------------*/

.testimonial-section .section-title1 {
    /*-----Section Title1-------------*/
    text-transform: uppercase;
    color: #1A8DFF;
    font-weight: normal;
    font-size: clamp(8pt, 2vw, 10pt);
    font-family: "Montserrat", sans-serif;
    text-wrap: pretty;
}

/*------------Column  left side Title2 (What our client say)----------------------*/
.testimonial-section .section-title2 {
    /*-----section Title2-------------*/
    font-size: clamp(18pt, 3vw, 32pt);
    text-transform: capitalize;
    color: #000000;
    font-weight: bolder;
    padding-bottom: 1vw;
    text-wrap: pretty;
}

/*------------Column  left side slide change button----------------------*/

.testimonial-section .carousel-item {
    padding: 0 10pt;
}

.testimonial-section .carousel .carousel-indicators {
    /*------Slide  Page  ||  where page is selected-----*/
    all: unset;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    list-style: none;
}

.testimonial-section .carousel .carousel-indicators li {
    /*------Slide  Page  Item || Page selection Button-----*/
    background-color: #0748A7;
    height: clamp(4pt, 1vw, 8pt);
    width: clamp(4pt, 1vw, 8pt);
    border-radius: 50%;
}


/*------------Column  left side active slide change button----------------------*/
.testimonial-section .carousel .carousel-indicators .active {
    height: clamp(10pt, 2vw, 13pt);
    width: clamp(10pt, 2vw, 13pt);
}

.testimonial-section .quote-wrapper p {
    /*-------Quote of customer ||  Customer Comments------------*/
    font-size: clamp(8pt, 2vw, 10pt);
    color: #0c3866;
    min-height: 6vw;
    text-wrap: balance;
}


.testimonial-section .quote-wrapper p::before {
    /*-------Double Quote before customer comments-------------*/
    content: '\275D';
    font-size: clamp(42pt, 4vw, 72pt);
    display: block;
    color: #3693D5;
    margin-bottom: -1.5vw;
}

.testimonial-section .quote-wrapper p::after {
    /*-------Double Quote after customer comments-------------*/
    content: '\275E';
    font-size: clamp(42pt, 4vw, 72pt);
    color: #3693D5;
    display: flex;
    justify-content: end;
    margin-top: -1.5vw;
}




.testimonial-section .quote-wrapper span {
    /*-----Customer Name  ||  Who comment this text------*/
    display: block;
    padding-top: 10pt;
    font-size: clamp(15pt, 2vw, 16pt);
    font-weight: bolder;
    text-transform: capitalize;
    color: #F2707E;
}



/*------------Column  right side----------------------*/

.testimonial-section .img-container {
    /*-----right side column|| Colum of circle ||  Clent Image column---------*/

    padding: clamp(30pt, 3vw, 50pt) 0pt;
}

@media screen and (max-width: 768px) {

    .testimonial-section .img-container {
        width: 100%;
    }
}

.testimonial-section .circle-container {
    /*-------------Circle area  ||   Indicate   Cirle boundary that can't be exit---------------*/
    margin: 0px auto;
    width: clamp(280pt, 40vw, 480pt);
    height: clamp(280pt, 40vw, 480pt);
    position: relative;
}




.testimonial-section .circle1 {
    /*-------Big Circle || Outer Circle---------*/

    height: 100%;
    width: 100%;
    border: 10px solid #F2707E;
    outline: 10px solid #0748A7;
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    animation: Rotate 20s linear infinite;
    -webkit-animation: Rotate 20s linear infinite;
}



.testimonial-section .circle2 {
    /*-------small Circle || 2nd  Circle---------*/

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    width: 80%;
    height: 80%;
    border: 10px solid #F2707E;
    border-radius: 50%;
    outline: 10px solid #0748A7;
    animation: circle-rotate 20s linear infinite;
    -webkit-animation: circle-rotate 20s linear infinite;
}


.testimonial-section .img-block {
    /*----Image Div ||  div that contain image ( client photo )-------*/
    position: absolute;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.testimonial-section .img-block img {
    /*----Image || Client Photo------*/
    width: clamp(40pt, 6vw, 60pt);
    height: clamp(40pt, 6vw, 60pt);
    object-fit: cover;
    border: clamp(5pt, 0.6vw, 10pt) solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation: Rotate-reverse 20s linear infinite;
    -webkit-animation: Rotate-reverse 20s linear infinite;
}


.testimonial-section .circle-container .active img {
    /*---client photo that is selected-----*/
    border: clamp(5pt, 0.6vw, 10pt) solid #00aeff;
}

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

                               Every circle have 4 image (client photo)
                                 
                             -----------------------------------------*/

.testimonial-section .img-block:first-child {
    /*---Client-1 Photo for both Circle1 and circle2--------*/
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.testimonial-section .img-block:nth-child(2) {
    /*---Client-2 Photo for both Circle1 and circle2--------*/
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    -webkit-transform: translate(50%, -50%);
}

.testimonial-section .img-block:nth-child(3) {
    /*---Client-3 Photo for both Circle1 and circle2--------*/
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
}

.testimonial-section .img-block:nth-child(4) {
    /*---Client-4 Photo for both Circle1 and circle2--------*/
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}


.testimonial-section .circle2 .img-block img {
    /*--Animation for only circle2----*/

    animation: img-rotate 20s linear infinite;
    -webkit-animation: img-rotate 20s linear infinite;
}

/*------------------------------
            Center Circle
-------------------------------*/

.testimonial-section .center-circle {
    /*-------Circle take center position------------*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
}


.testimonial-section .center-circle :nth-child(1) {
    /*-----Center most circle ----------*/
    background: #F2707E;
    border-radius: 50%;
    box-shadow: 0px 3px 7px .7px rgba(0, 0, 0, .5);
    box-sizing: content-box;
    height: 78px;
    width: 78px;
    position: absolute;
    top: 35%;
    left: 35%;
}


.testimonial-section .center-circle :nth-child(1):before {
    content: "";
    background: rgba(0, 0, 0, 0.07);
    position: absolute;
    width: 168px;
    height: 2px;
    left: -60%;
    top: 50%;
    transform: rotate(45deg);
    z-index: -2;
}



.testimonial-section .center-circle :nth-child(2) {
    border: 15px solid;
    border-color: rgba(105, 138, 172, 0.8) rgba(105, 138, 172, 0.8) transparent transparent;
    border-radius: 50%;
    box-sizing: content-box;
    height: 98px;
    width: 98px;
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: -1;
    animation: circle-move 10s ease infinite;
}

.testimonial-section .center-circle :nth-child(3) {
    background: rgba(0, 0, 0, .017);
    border: 25px solid;
    border-color: #74d2e7 transparent transparent;
    border-radius: 50%;
    box-shadow: 0px 0px 25px -10px rgba(0, 0, 0, 0.65);
    box-sizing: content-box;
    height: 90px;
    width: 90px;
    position: absolute;
    top: 22%;
    left: 22%;
    z-index: -2;
    animation: circle-move 14s ease infinite;
}

.testimonial-section .center-circle :nth-child(4) {
    background: rgba(0, 0, 0, .012);
    border: 2px solid;
    border-color: #0085ad transparent;
    border-radius: 50%;
    box-sizing: content-box;
    height: 168px;
    width: 168px;
    position: absolute;
    z-index: -3;
    top: 15%;
    left: 15%;
    animation: circle-move 15s ease infinite;
}

/* This is the thin line to centre */
.testimonial-section .center-circle :nth-child(5):before {
    content: "";
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 220px;
    height: 2px;
    left: 0%;
    top: 50%;
    transform: rotate(-45deg);
    z-index: -2;
}

.testimonial-section .center-circle :nth-child(5) {
    background: rgba(0, 0, 0, .012);
    border: 10px solid;
    border-color: #146eb4 #8aa4be;
    border-radius: 50%;
    box-sizing: content-box;
    height: 220px;
    width: 220px;
    position: absolute;
    z-index: -3;
    top: 1%;
    left: 1%;
    animation: circle-spin 10s ease infinite;
}

.testimonial-section .center-circle :nth-child(6) {
    background: rgba(0, 0, 0, .012);
    border: 4px dotted;
    border-color: #2c3e50 #8aa4be;
    border-radius: 50%;
    box-sizing: content-box;
    height: 203px;
    width: 203px;
    position: absolute;
    z-index: -3;
    top: 7%;
    left: 7%;
    animation: circle-spin 15s linear infinite;
}

.testimonial-section .center-circle :nth-child(7) {
    background: rgba(0, 0, 0, .012);
    border: 1px none;
    border-radius: 50%;
    box-sizing: content-box;
    height: 249px;
    width: 249px;
    position: absolute;
    z-index: -3;
    top: -1%;
    left: -1%;
    box-shadow: 0px 10px 20px 0.7px rgba(0, 0, 0, 0.4);
}



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

                 *pricing-section*

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



@media screen and (min-width: 768px) {
    .pricing-section {
        /*----in Big screen ( Minimum width 768px ) all text will stay in cente-----*/
        text-align: center;
        /*----in small screen ( Maximum width 768px ) all text will stay in cente-------*/
    }
}


/*------------------------------------------------
  
          top section title and text 
  
  --------------------------------------------------*/

.pricing-section .section-title1 {
    /*-----Section Title1 || Top center title1----------- --*/
    text-transform: uppercase;
    color: #1A8DFF;
    font-weight: normal;
    font-size: clamp(10pt, 2vw, 11pt);
    font-family: "Montserrat", sans-serif;
}

.pricing-section .section-title2 {
    /*-----section Title2 || Top center title2-------------*/
    font-size: clamp(21pt, 3vw, 36pt);
    text-transform: capitalize;
    color: #000000;
    font-weight: bolder;
    padding-bottom: 1vw;
}

.pricing-section .section-text {
    /*-----Section text-|| Top center 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  Section text-|| Top center text will stay in center-------*/
    .pricing-section .section-text {
        width: clamp(180pt, 80%, 612pt);
        display: block;
        margin: auto;
    }
}



/*------------------------------------------------
  
          section row and column
  
  --------------------------------------------------*/
.pricing-section .row {
    /*-----Row Style || all item under row will  take center position-------------*/
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    padding-top: clamp(70pt, 10vw, 90pt);
}


.pricing-section .col-12 {
    /*------all colum's  margin and width--------*/
    margin-bottom: clamp(80pt, 10vw, 90pt);
    max-width: 450pt;
}


/*------------------------------------------------
  
         Pricing table || every column table
  
  --------------------------------------------------*/

.pricing-section .pricing-table {
    background-color: #AE1EC7;
    color: #fff;
    text-align: center;
    position: relative;
    padding-top: 20px;
    margin: 0 30px 0;
}

.pricing-section .pricing-table:after {
    content: " ";
    background-color: #AE1EC7;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: skew(0deg, -7deg);
    transform-origin: left bottom 0;
    z-index: -1;
}


/*------------------------------------------------
  
            Pricing header
  
  --------------------------------------------------*/
.pricing-section .pricing-table .pricing-header {
    margin: 0 -10px;
    padding: 15pt 0;
    position: relative;
}


.pricing-section .pricing-table .pricing-header:before,
.pricing-section .pricing-table .pricing-header:after {
    content: "";
    height: 100%;
    left: -20px;
    position: absolute;
    top: 50%;
    width: 30px;
    z-index: -1;
}

.pricing-section .pricing-table .pricing-header:after {
    left: auto;
    right: -20px;
}


.pricing-section .pricing-header,
.pricing-section .pricing-header::before,
.pricing-section .pricing-header::after {
    /*-----Pricing Table-1 title background color---*/
    background-color: #3d1237;
    color: rgb(252, 245, 245);
}




/*------------------------------------------------
  
      Offer list || a list of different condition
  
  --------------------------------------------------*/
.pricing-section .pricing-content {
    /*-----Pricing content || offer detials || all option------*/

    font-size: clamp(8pt, 2vw, 10pt);
    color: #0a0a0a;
    letter-spacing: 1px;
    line-height: clamp(30pt, 4vw, 50pt);
    text-wrap: pretty;
}

.pricing-section .pricing-content ul {
    /*----remove list style '.'----*/
    list-style-type: none;
    margin: 0pt 0pt 0pt 0pt;
    line-height: 2.5;
    padding: 0;
    background-color: #fddffc;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-section .pricing-content ul li {
    /*---every list item bottom have border----*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-section .pricing-content ul li:last-child {
    /*---remove last list item bottom  border----*/
    border-bottom: none;
}



/*---------------------------------
  
       Pricing Table Plan Name
  
  -----------------------------------*/
.pricing-section .pricing-table .title {
    /*----Plan Nmae-----*/
    position: relative;
    font-size: clamp(12pt, 2vw, 16pt);
    margin: 0;
    font-weight: bolder;
    text-transform: uppercase;
}

.pricing-section .pricing-table .title:before,
.pricing-section .pricing-table .title:after {
    border-bottom: 28px solid transparent;
    border-left: 10px solid #fff;
    border-top: 28px solid transparent;
    top: 50%;
    content: "";
    left: -20px;
    position: absolute;
}

.pricing-section .pricing-table .title:after {
    border-left: medium none;
    border-right: 10px solid #fff;
    left: auto;
    right: -20px;
}


/*---------------------------------
  
  Pricing Table Offer Price
  
  -----------------------------------*/
.pricing-section .price-value {
    /*------Offer Price--------*/

    padding: 10pt 0pt;
    position: relative;
    font-size: clamp(16pt, 3vw, 28pt);
}



.pricing-section .price-value:before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    border-top: 12px solid rgba(0, 0, 0, 0.6);
    border-left: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.pricing-section .pricing-table .price-value:after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    border-top: 12px solid rgba(0, 0, 0, 0.6);
    border-right: 12px solid transparent;
    border-bottom: 12px solid transparent;
}


.pricing-section .price-value sup {
    font-size: clamp(10pt, 2vw, 12pt);
    color: #fff;
    text-transform: capitalize;
    display: block;
    margin: auto;
    padding-top: 10pt;
}





/*---------------------------------
  
  Pricing Table submit || order button
  
  -----------------------------------*/


.pricing-section .pricing-table .pricingTable-Sign-Up {
    background-color: #AE1EC7;
    padding: 20px 0 20px;
    position: relative;
}



.pricing-section .pricing-table .pricingTable-Sign-Up:before {
    content: " ";
    background-color: #AE1EC7;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    transform: skew(0deg, 7deg);
    transform-origin: left bottom 0;
    z-index: -1;
}





.pricing-section .pricing-table .pricingTable-Sign-Up a {
    display: inline-block;
    font-size: clamp(12pt, 2vw, 16pt);
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #fff;
    position: relative;
    padding: 0.5vw 2vw;
    transition: all 0.3s ease 0s;
}



.pricing-section .pricing-table .pricingTable-Sign-Up a:before,
.pricing-section .pricing-table .pricingTable-Sign-Up a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    height: 2px;
    width: 0;
    transition: all 0.3s ease 0s;
}

.pricing-section .pricing-table .pricingTable-Sign-Up a:after {
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
}

.pricing-section .pricing-table:hover .pricingTable-Sign-Up a {
    letter-spacing: 3px;
}

.pricing-section .pricing-table:hover .pricingTable-Sign-Up a:before,
.pricing-section .pricing-table:hover .pricingTable-Sign-Up a:after {
    width: 100%;
}




/*--------------------------------------------------------------
                    # sponsor
  --------------------------------------------------------------*/

.sponsor-section {
    padding: 2vw 0pt;
}


.sponsor-section .section-title {
    /*-----Section Title1-------------*/
    text-transform: capitalize;
    color: #1A8DFF;
    font-weight: normal;
    font-size: clamp(16pt, 2vw, 21pt);
    padding-bottom: 1vw;
}


.sponsor-section .col-4 {
    min-height: 4vw;
    margin-bottom: 10pt;
}



.sponsor-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: clamp(6px, 1vw, 10px) solid #F27280;
    box-shadow: 0 3px 6px #DFDFDF, 0 3px 6px #DFDFDF;
    border-radius: 30% 10%;
}

.sponsor-section i {
    color: #F2707E;
    font-size: clamp(21pt, 3vw, 32pt);
}

.sponsor-section .carousel-control-prev i {
    margin-left: -20vw;
}

.sponsor-section .carousel-control-next i {
    margin-right: -20vw;
}







/*-------------------------------------------
      Google Map
----------------------------------------------*/


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

                 +++Footer Section++++

--------------------------------------------------------------*/
.footer-section {
    margin-top: 120pt;
    position: relative;
    width: 100%;
    background: #3d1237;
    padding: 0px 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(50pt, 15vw, 70pt);
    padding-bottom: 10pt;
    object-fit: cover;
}

@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('../images/wave-footer.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: black;
    /*----Copyright Background Color-----*/
    border: 1px solid black;
    /*------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: #F87381;
    /*-----Copyright highlighted Text-----*/
}

/* video fram css start  */
.container.video-frame {
    padding: 20px;
}

.video-box {
    position: relative;
    text-align: center;
    cursor: pointer;
}

.video-image img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.video-image img:hover {
    transform: scale(1.05);
}

/* Play Button Overlay */
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 20px;
    /* background: rgba(0, 0, 0, 0.6); */
    border-radius: 50%;
    transition: background 0.3s ease-in-out;
}

.content:hover {
    background: rgba(0, 0, 0, 0.8);
}

.content span {
    color: #fff;
    font-size: 24px;
}

/* Lightbox Styling */
.lightbox-image {
    display: block;
    width: 100%;
    height: 100%;
}

.flaticon-play-button {
    font-size: 24px;
    color: white;
}

.ripple {
    display: block;
    width: 140px;
    height: 140px;
    margin-top: -78px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: ripple-effect 1.5s infinite;
}

@keyframes ripple-effect {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.video-frame{
    background-color:#FED6F0;
    /* border-radius: 30px;  */
}
/* video fram css end  */

/* event slider css start  */
.event-container {
    position: relative;
    display: inline-block;
}

.event-label {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
}

.event-slider{
    background-color: #b7bafa;
}
/* event slider css end  */


.pricing-section{
    background-image: url(../images/bg-registration.webp);
   /* background-repeat: no-repeat; */
   /* background-size: cover; */
 
}

/* registration css start  */
.fee-box {
    padding: 1rem;
    /* margin: 1rem; */
    background: #fff;
    color: #02080a;
    transition: all 0.4s ease;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.024), 0px 0px 2.7px rgba(0, 0, 0, 0.034), 0px 0px 13.8px rgba(0, 0, 0, 0.041), 0px 0px 23.2px rgba(0, 0, 0, 0.049), 0px 0px 30px rgba(0, 0, 0, 0.07);
  }
  
  .fee-box h3 {
    color: #198754;
    font-size: 1.425rem;
    font-weight: 600;
    font-family: 'Aboreto';
  }
  
  .fee-box li {
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0;
    border-bottom: 1px solid #ececec;
    transition: box-shadow 200ms ease-in;
    font-family: 'Quicksand';
  }
  
 .pricing-tag {
    font-size: 16px;
    font-weight: 700;
    color: #3d1237;
    text-transform: uppercase;
    /* background: #02080a; */
    /* background: linear-gradient(to right, #1b65bc 0%, #393185 100%); */
    background: #3d123757;
    padding: 5px 20px;
    line-height: 36px;
    border-radius: 3px;
    border: 0;
    position: relative;
  }
  
  .pricing-label-img img, .pricing-label-img1 img {
    width: 100%;
  }

  .pricing-tag:after, .pricing-tag:before {
    position: absolute;
    left: -10px;
    top: 0;
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    bottom: 0;
    margin: auto;
  }
  
  .pricing-tag:after {
    position: absolute;
    left: auto;
    top: 0;
    right: -10px;
  }
  
 

  
.nine h1 span {
    margin-top: 5px;
    font-size: 18px;
    color: #444;
    word-spacing: 1px;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    color: #3d1237;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
  }
  
  .nine h1 span:after,
  .nine h1 span:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    height: 5px;
    background-color: #f8f8f8;
  }

  .about {
    background: radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, #def3ff 68% 70%, #0000 72%) 32px 32px / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, #def3ff 68% 70%, #0000 72%) 32px 32px / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, #def3ff 68% 70%, #0000 72%) 0 0 / calc(2* 32px) calc(2* 32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, #def3ff 68% 70%, #0000 72%) 0 0 / calc(2* 32px) calc(2* 32px), repeating-conic-gradient(#ffffff 0 25%, #0000 0 50%) 0 0 / calc(2* 32px) calc(2* 32px), radial-gradient(#0000 66%, #def3ff 68% 70%, #0000 72%) 0 calc(32px / 2) / 32px 32px #ffffff;
}
  
/* registration css end  */


/* accommodation wave animation start  */

@keyframes up-down{
    0% {
      transform:  translate(1px,20px)  ;
    }
    24% {
      transform:  translate(1px,30px)  ;
    }
    50% {
      transform:  translate(1px,12px)  ;
    }
    74% {
      transform:  translate(1px,22px)  ;
    }
    100% {
      transform:  translate(1px,22px)  ;
    }
  }
  
  @-moz-keyframes up-down{
    0% {
      -moz-transform:  translate(1px,20px)  ;
    }
    24% {
      -moz-transform:  translate(1px,30px)  ;
    }
    50% {
      -moz-transform:  translate(1px,12px)  ;
    }
    74% {
      -moz-transform:  translate(1px,22px)  ;
    }
    100% {
      -moz-transform:  translate(1px,22px)  ;
    }
  }
  
  @-webkit-keyframes up-down {
    0% {
      -webkit-transform:  translate(1px,20px)  ;
    }
    24% {
      -webkit-transform:  translate(1px,30px)  ;
    }
    50% {
      -webkit-transform:  translate(1px,12px)  ;
    }
    74% {
      -webkit-transform:  translate(1px,22px)  ;
    }
    100% {
      -webkit-transform:  translate(1px,22px)  ;
    }
  }
  
  @-o-keyframes up-down {
    0% {
      -o-transform:  translate(1px,20px)  ;
    }
    24% {
      -o-transform:  translate(1px,30px)  ;
    }
    50% {
      -o-transform:  translate(1px,12px)  ;
    }
    74% {
      -o-transform:  translate(1px,22px)  ;
    }
    100% {
      -o-transform:  translate(1px,22px)  ;
    }
  }
  
  @-ms-keyframes up-down {
    0% {
      -ms-transform:  translate(1px,20px)  ;
    }
    24% {
      -ms-transform:  translate(1px,30px)  ;
    }
    50% {
      -ms-transform:  translate(1px,12px)  ;
    }
    74% {
      -ms-transform:  translate(1px,22px)  ;
    }
    100% {
      -ms-transform:  translate(1px,22px)  ;
    }
  }
  
  
  
  
  .up-down{
    animation: up-down linear 4s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: up-down linear 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: up-down linear 4s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: up-down linear 4s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: up-down linear 4s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;
  }
  

/* accommodation wave animation end  */