/* EMBEDED FONTS */

@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=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    /* RESET STYLE */
*,
*::before,
*::after{
    padding: 0;
    margin: 0;
}




html{
    scroll-behavior: smooth;
    overflow-x: clip;
}


/* BODDY */
body{
    
    font-family: 'poppins' , sans-serif;
    background-color:#F4F5FF; 
    overflow-x: clip;  
}

/* BLUR EFFECT */

.blur-effect main, 
.blur-effect h2, 
.blur-effect h1, 
.blur-effect p, 
.blur-effect button, 
.blur-effect section,
.blur-effect footer{
    filter: blur(0.2rem);
    pointer-events: none;
    

    } 



    /* UTILITY CLASS */
    .error{
        font-size: 0.8rem;
        color: red;
               
      }

    /* VARIABLES */

    :root{

    /*FONTS*/

    --FF:"poppins", sans-serif;
    --FF-HEADINGS: 'poppins', sans-serif;
    --FS: clamp(1rem, 2.2vh, 1.5rem);
    --BOLDED: (font-size 800);
    
    /*COLOR*/

    --BGCOLOR: rgb(245, 244, 219);
    --FOOTER-BGCOLOR: rgb(17, 17, 16);
    --FONT-COLOR:rgb(27, 27, 27);
    --HEADING-COLOR:rgb(39, 44, 45);
    --POPUP-FONT-COLOR:rgb(229, 238, 243);
    --HERO-FONT-COLOR:rgb(229, 238, 243);
    --BUTTON-BG-COLOR:rgb(26, 27, 25);
    --BUTTON-F-COLOR: #fff;
    --SHADOW-COLOR: rgb(0, 0, 0, 0.3);
    --SPAN-COLOR:rgb(243, 243, 237);
    --SPAN-COLOR2:rgb(27, 92, 167);
    --P-COLOR:rgb(247, 246, 243);
  
    /*LINK COLOR*/
    --LINK-COLOR: rgb(230, 238, 237);
    --ANCHOR-COLOR: rgb(237, 235, 232);
    --LINK-HOVER:rgb(138, 144, 144);
    --NAV-LINK-HOVER:rgb(19, 193, 175);
    --LINK-ACTIVE:rgb(211, 189, 19);
    --LINK-FOCUS:rgb(78, 90, 54);
    --HEADER-BACKGROUND: rgb(140, 140, 147);
    --NAV-BACKGROUND:rgb(48, 121, 204);

        /*STNDARD PADDING*/

        --PADDING-SIDE: 2.5%;
        --PADDING-TB: 0,25em;

        /*STANDARD MARGIN*/
        --MARGIN: clamp(1em, 2.5vh, 1em)0;
        
    }

        address{
            text-align: center;
        }


        /* DEFAULT */

        p{
            font-size: var(--FS);
        }

        .pCentered{
            text-align: center;
        }

        .pEmphasis{
            font-size: 1.4rem;
        }

        .headingEmphass{
            color: #141414;
            font-size: 2.1rem;
            text-shadow: 0px 3px 6px var(--SHADOW-COLOR);
        }
           
            /* TOP COMPANY NAME */

            .companyName .topCompanyName{
                color: rgb(35, 36, 36);   
                font-weight: normal;
                cursor: pointer;
                font-size: 0.9rem;
                
            }

            .companyName .topCompanyName a{
                text-decoration: none;
                color:rgb(246, 245, 243);
                font-size: 0.9rem;
            }


        /* HEADER EMPHASIS */
            .headingEmphasis{
                color:rgb(27, 92, 167);
                text-shadow: 0px 4px 7px var(--SHADOW-COLOR);
            }

            .headingEmphasiss{
                color :rgb(27, 92, 167);
                font-weight: normal;
            }

            .headingEm{
                color:rgb(27, 92, 167);
                
            }

            .edText{
                color :rgb(27, 92, 167);
            }


            /* HERO SECTION */


                    /* HEADER  */

            .hero{
                position: relative;
                height: auto;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                

            }
            
            .navigation{
               position: sticky;
                top: 0;
                width: 100%;
                background-color: var(--NAV-BACKGROUND);
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-shadow: 0px 4px 8px var(--SHADOW-COLOR);
                
                z-index: 4;
            }

            .navigation nav ul{
                display: flex;
                gap: 1rem;
                margin-right: 35px;
               
            }

            
            /* ANCHOR STYLES */

             /* header anchor */
        header nav li{
            text-decoration: none;
            list-style: none;
            
        }
        header  a{
            text-decoration: none;
            list-style: none;
            font-weight: 400;
            color:rgb(237, 238, 241);
            cursor: pointer;
            font-size: 1.2rem;
        }

        header  a:hover{
            text-decoration: underline;
            color: #7d7d7b;
            cursor: pointer;
        }

        header  a:active{
           
            color: var(--LINK-ACTIVE);
            
        }

        header  a:focus{
           
            color: var(--LINK-FOCUS);
            
        }

        /*  */

        /* OVERLAY COLOR */

        .overlay{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #3677b0;
            opacity: 40%;
            z-index: 1;

        }


        /* BACKGROUND */

            .background-video{
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                object-fit: cover;
                opacity: 40%;
                z-index: -1;
            }


            header .headerText{
                margin-top: 80px;
                font-size: 1.6rem;
                text-shadow: 0px 6px 12px var(--SHADOW-COLOR);
                z-index: 2;
            }

            /* DESK TOP SUBMEN STARTS HERE */

            .deskTopSubMenu{
                position: relative;
            }


            #deskTopDropDownMenu{
                top: 158%;
                width: 100%;
                left: 0;
                background-color: #232121;
                position: absolute;
                display: flex;
                padding: 70px;
                flex-direction: column;
                box-shadow: 3px 6px 9px var(--SHADOW-COLOR);
                transform: translateY(-600px) rotate(160deg);
                transition: transform 1s ease-in-out;
                z-index: 1;
                
              } 

              #deskTopDropDownMenu.showMenu{
                transform: translate(0) rotate(0);
              }

              #deskTopDropDownMenu a{
               text-decoration: none;
                color:rgb(239, 242, 245);
                
              }

              #deskTopDropDownMenu a:hover{
                background-color: #2f2c2c;
                width: 100%;
                color: #4e8dcd;
                text-decoration: none;
                
              }
              




            /* HEADER BUTTON */

          header  button{

                padding: 10px 32px;
                outline: 0;
                border: 0;
                background:rgb(42, 46, 52);
                border-radius: 3px;
                color: #e8eae1;
                font-family: "poppins", sans-serif;
                font-size: 1rem;
                transition: 0.40s ease-in;
                margin-top:22px ;
                z-index: 3;
            }

          header  button:hover{
                transform: translateY(4px);
                background: rgb(65, 67, 74);
                border-radius: 3px;
                color: #f4f5f3;
                cursor: pointer;
            }


              /* BODY BUTTONS */

          button{

            padding: 10px 32px;
            outline: 0;
            border: 0;
            background:#3677b0;
            border-radius: 1px;
            color: #e8eae1;
            font-family: "poppins", sans-serif;
            font-size: 1rem;
            transition: 0.40s ease-in;
            margin: 22px 0px;
            
        }

        button:hover{
            transform: translateY(4px);
            background:#5e9acf;
            border-radius: 3px;
            box-shadow: 2px 5px 6px var(--SHADOW-COLOR);
            color: #f4f5f3;
            cursor: pointer;
        }

            .btnCentered{
                display: block;
                margin: 10px auto;

            }

            /* PARAGRAPH STYLES STARTS HERE */

                p{
                    transform: translateX(60px);
                    opacity: 0;
                    transition: 1s ease-in-out;
                }

                .p--visible{
                    transform: translateX(0);
                    opacity: 1;

                }

                /* BTTN */

                .btttn{
                    background-color: #2f2c2c;
                }


           /* LOADER */

           .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgb(31, 29, 27); /* or any background you like */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-y: hidden;
            z-index: 9999;
            
          }

          .loader::after {
            content: "";
            width: 75px;
            height: 75px;
            border: 8px solid rgb(181, 221, 181);
            border-top-color:rgb(9, 111, 137);
            border-radius: 50%;
            animation: loading 0.75s ease infinite;
          }

          

          @keyframes loading {
             from { transform: rotate(0turn);}

             to{transform: rotate(1turn);}
           
          }
          
          .loader.hide {
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
          }
              
            /* MAIN */

            main{
                padding: var(--PADDING-SIDE);
                background-color: #f4f5f3;
            }


            /* BACK TO TOP */

            .backToTop{

                position: fixed;
                border-radius: 3px;
                top: 90%;
                left: 2.5%;
                background-color:  rgb(236, 246, 208);
                padding: 12px;
                color: #e8eae1;
                box-shadow: 0px 3px 6px var(--SHADOW-COLOR);
                cursor: pointer;
                transform: translateY(-50%);
                z-index: 1;

            }

            .backToTop .fa{
                color: #141414;
            }

            /* DROP ICON STYLES STARTS HERE */

            .floatingContactIcons{
                position: fixed;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                top: 60%;
                right: 4%;
                padding: 15px;
                background-color: #eef1cf;
                border-radius: 3px;
                margin-bottom: 22px;
                transition: transform 1s ease-in-out;
                box-shadow: 1px 3px 4px var(--SHADOW-COLOR);
                z-index: 10;
            }

            .floatingContactIcons.cancel{
                transform: translate(200px) scaleY(3.5);
            }

            .floatingContactIcons a{
                color: rgb(27, 27, 27);
            }

            .floatingContactIcons a:hover{
                color:var(--LINK-HOVER);
            }

            .floatingContactIcons a:active{
                color:var(--LINK-ACTIVE);
            }

            .floatingContactIcons a:focus{
                color:var(--LINK-FOCUS);
            }

            .floatingContactIcons .fa, .Icons, .fab, .fa{
                cursor: pointer;
            }

            .Icons{
                display: flex;
                flex-direction: column;
                gap: 1rem;
                max-height: 0;
                overflow: hidden;
                transition: max-height 1s ease-in-out;
            }

            .Icons.unfold{
                max-height: 200px;
            }            

            /* THIS IS SITE FOOTER STYLE */

            footer{

                background-color: #121216;
                padding: var(--PADDING-SIDE);
            }



            /* FOOTER ACHOR STYLES */

        
            footer a{
                color: rgb(209, 215, 229);
                list-style-type: none;
               
            }

            footer a:hover{
                color: rgb(177, 122, 19);
            }


            /* FOOTER ACHOR STYLES */

            footer .fab{
                color: rgb(214, 206, 192);
                background-color:rgb(26, 88, 221);
                padding: 12px;
                border-radius: 50%;
                margin: 6px;
            }

            footer .fab:hover{
                color: rgb(241, 239, 235);
            }

            .footerLegal{
                background-color: #232121;
                padding: 12px 22px;
                text-align: center;
            }
            .footerLegal h6{
                color: #7d7d7b;
            }


            .footerLegal span{
                color: #e8eae1;
                font-weight: normal;
                cursor: pointer;
                font-size: 0.7rem;

            }

            .footerContents{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                justify-content: center;
                gap: 1rem;
                
            }

            .footerContents .footerMenu li{
                list-style: none;
               
            }

            .footerContents a{
                text-decoration: none;
               
            }

            .footerContents a:hover{
                text-decoration: underline;
                color: #b4b6ac;
               
            }


            /* FOOTER MEDIA QUERY */

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

                .footerContents{
                    display: grid;
                   grid-template-columns: repeat(2, 1fr);
                    justify-content: center;                 
                    gap: 1rem;
                    
                }

                .footerSocialIcons{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                   
                }


                
    /* hamburger-icon */

    .hamburger-menu{
        color:orange;
        font-size: 2rem;
        margin-right: 1rem;
        cursor: pointer;
      }
  
      .mobile-menu-nav{
        position: relative;
      } 
  
      .mobile-menu {
        position: fixed;
        display: flex;
        flex-direction: column;
        top: -100%;
        left: 0;
        width: 100%;
        opacity: 1;
        height: auto;
        line-height: 20px;
        background-color: rgba(39, 40, 40, 0.988);      
        transition: opacity 1s ease-in-out;
        padding: 12px 0px;
        box-shadow: 0px 7px 9px var(--SHADOW-COLOR);
        
        
      }
  
      @keyframes skewJumpIn {
        
        0% {
          opacity: 0;
          transform: translateY(-50%) skewX(-30deg) scale(0.8);
        }
        50% {
          transform: translateY(10%) skewX(10deg) scale(1.05);
        }
        100% {
          opacity: 1;
          transform: translateY(0) skewX(0deg) scale(1);
        }
  
      }
      
      .mobile-menu.mobilePitch{
        
        opacity: 1;
        top: 0;
        pointer-events: all;
        animation: skewJumpIn 1s ease-in-out;
        
      }
  
  
      /* MOBILE SUB MENU */
  
      #mobileDropDownMenu{
        display: flex;
        flex-direction: column;
        max-height: 0;
        overflow: hidden;
        color: orange;
        width: 100%;
        margin-top: 8px;     
        background-color: rgb(207, 207, 189);
        transition: max-height 0.6s ease-in-out;
      }

      
  
      #mobileSubMenu ul a{
        color: rgb(234, 234, 224);
      }
  
      #mobileDropDownMenu.active{
        max-height: 280px;
        color: brown;
        text-align: center;
        padding: 8px 0px;
      }
  
      .flipflop{
        rotate: 180deg;
      }

        /* DESK TOP MENU INVISIBLE */
        .deskTop-menu{
          display: none;
        }
  
  
     /* TOP COMPANY NAME */
  
     .companyName .topCompanyName{
      color: rgb(35, 36, 36);   
      font-weight: normal;
      cursor: pointer;
      font-size: 0.7rem;
  }
  
  
    /* HEADER TEXT */
    header
    .headerText{
      font-size: 0.9rem;
    }
  
    /* DESK H1 */
  
    .deskH1{
      display: none;
    }


    
    .scrollEffect{
        animation: scrollIn linear;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
        transition: transform 1s ease-in-out;
    }

     @keyframes scrollIn {

        from {
            opacity: 0;
            transform: translateX(-900px);
        }

        to {
            opacity: 1;
            transform:translateX(900px);
        }
    }


    .slideIn{

        animation: slideIn 1s ease-in-out;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
        transition: transform 1s ease-in-out;
    }


    @keyframes slideIn {

        from {

            opacity: 0;
            transform: translateX(-30px) rotateX('angle') scaleX(1);
        }

        to {
            opacity: 1;
            transform: translateX(-330px) rotate(0deg) scaleX(1);

        }
    }
             
    
}

        .scrollEffected { 
            animation: scrollSlide 1s ease-out;
            animation-timeline: view();
            animation-range: entry 0% cover 50%;
            will-change: transform, opacity;
        }
        
        @keyframes scrollSlide {
            0% {
                opacity: 0;
                transform: translateX(-300px) scale(0.95);
            }
            60% {
                opacity: 1;
                transform: translateX(50px) scale(0.4);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }


       

     /* GLOBAL */

     .servicesApproach .fa{
        color:rgb(4, 79, 98);
      }