@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');
 * {
     Margin: 0;
     Padding: 0;
     Box-sizing: border-box;
 }
 
 
 :root {
     --sora: 'Sora', sans-serif;
    }
    html,
    body {
        Width: 100%;
        Height: 100%;
     font-family: var(--sora);
        scroll-behavior: smooth;
    }
 
 h1 h2 h3 h4 h5 h6 a p {
     font-family: var(--sora);
 }
 
 .loader{
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,.3);
    border-top:2px solid #fff;
    border-radius:50%;
    display:inline-block;
    margin-right:8px;
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

#toast{
    position:fixed;
    top:30px;
    right:30px;
    z-index:9999;

    padding:16px 24px;
    border-radius:12px;

    color:#fff;
    font-weight:600;

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);
    transition:.3s;
}

#toast.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#toast.success{
    background:#22c55e;
}

#toast.error{
    background:#ef4444;
}


 #main {
     width: 100%;
 }
 
 #hero {
     width: 100%;
     height: 100vh;
     position: relative;
     background-color: #F9F9F9;
 }
 
 #bg {
     width: 50%;
     height: 90vh;
 }
 
 #bg img {
     width: 100%;
     height: 100vh;
 }
 
 #header {
     position: absolute;
     top: 0;
     z-index: 1;
     display: flex;
     padding: 60px 40px 0px 40px;
     align-items: center;
     /* padding: 20px 40px; */
     justify-content: space-between;
     /* background-color: red; */
     width: 100%;
 }
 #hidden-div{
    width: 120px;
 }
 #navtitle {
     width: max-content;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 #navtitle img {
     width: 12px;
 }
 
 #navtitle h1 {
     text-transform: capitalize;
     font-size: 2vw;
     font-family: var(--sora);
 }
 
 #link-tree a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
     height: 36.02px;
     padding: 9px 10px 9px 10px;
     background-color: #222222;
     color: #fff;
     text-decoration: none;
     font-family: var(--sora);
     font-weight: 500;
     transition: all 0.2s ease-in;
 }
 
 #link-tree1 a {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
     height: 36.02px;
     padding: 9px 10px 9px 10px;
     background-color: #222222;
     color: #fff;
     text-decoration: none;
     font-family: var(--sora);
     font-weight: 500;
     transition: all 0.2s ease-in;
 }
 
 #link-tree2 a {
     display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
     height: 36.02px;
     padding: 9px 10px 9px 10px;
     background-color: #222222;
     color: #fff;
     text-decoration: none;
     font-family: var(--sora);
     font-weight: 500;
     transition: all 0.2s ease-in;
 }
 
 #link-tree .hover-show{
    display: none;
 }

 #link-tree a:hover .hover-hide{
    display: none;
 }
 #link-tree a:hover .hover-show{
    display: block;
 }
 #link-tree a:hover {
    color: #222222;
     background-color: #EFC71D;
 }
 

#link-tree1 .hover-show{
    display: none;
 }

 #link-tree1 a:hover .hover-hide{
    display: none;
 }
 #link-tree1 a:hover .hover-show{
    display: block;
 }
 #link-tree1 a:hover {
    color: #222222;
     background-color: #EFC71D;
 }

 #link-tree2 .hover-show{
    display: none;
 }

 #link-tree2 a:hover .hover-hide{
    display: none;
 }
 #link-tree2 a:hover .hover-show{
    display: block;
 }
 #link-tree2 a:hover {
    color: #222222;
     background-color: #EFC71D;
 }
 

 
 #link-tree img {
     width: 20px;
     height: auto;
     object-fit: cover;
 }

 #link-tree2 img {
     width: 20px;
     height: auto;
     object-fit: cover;
 }

 
 #heroContent {
    width: max-content;
     position: absolute;
     top: 44%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 
 #heroContent #content h1 {
     text-align: center;
     color: #222222;
     font-size: 32px;
     line-height: 1.5;
     font-weight: 600;
     font-family: var(--sora);
 }
 #heroContent #content h3 {
     text-align: center;
     color: #7f7f7f;
     font-size: 24px;
     margin: auto;
     line-height: 1.2;
     font-weight: 400;
     font-family: var(--sora);
 }
 
 #content i {
     font-size: 48.2px;
     font-weight: 800;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     color: #EFC71D;
     text-shadow: 0px 0px 2px #00000013;
 }
 
 #content {
     margin-bottom: 15%;
 }
 

 
 #rect {
     position: absolute;
     top: 94%;
     left: 51%;
     width: 98%;
     height: 80px;
     background-color: #EFC71D;
 }
 
 #scroller {
     padding: 40px;
     background-color: #222222;
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: auto;
     position: relative;
     z-index: 10;
 }
 
 #scroller::-webkit-scrollbar {
     display: none;
 }
 
 #scroller h4 {
     display: inline-block;
     font-family: var(--sora);
     font-size: 2vw;
     font-weight: 400;
     margin-right: 30px;
     color: #fff;
     transition: all linear 0.4s;
 }
 
 #scroller-in {
     display: inline-block;
     white-space: nowrap;
     animation-name: scroll;
     animation-duration: 10s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
 }
 
 @keyframes scroll {
     from {
         transform: translateX(0);
     }
     to {
         transform: translateX(-100%);
     }
 }
 
 #contact {
     width: 100%;
     height: fit-content;
     padding: 80px 40px;
 }
 
 #contact h1 {
     font-size: 2.9vw;
     font-family: var(--sora);
     font-weight: 700;
 }
 
 #contactform {
     margin-top: 60px;
     width: 90%;
     height: 100%;
 }
 
 #contactform #row {
     /* background-color: red; */
     width: 100%;
     height: 40px;
     display: flex;
     align-items: center;
     margin-bottom: 60px;
 }
 
 #contactform #row h2 {
     font-size: 2.2vw;
     font-family: var(--sora);
     font-weight: 500;
 }
 
 #contactform #row h4 {
     cursor: pointer;
     margin-left: 20px;
     padding: 20px;
     /* width: 200px; */
     text-align: center;
     border-radius: 100px;
     font-size: 1.5vw;
     font-family: var(--sora);
     font-weight: 300;
     transition: all 0.2s linear;
 }
 
 #row input {
     font-family: var(--sora);
     font-size: 2vw;
     font-weight: 500;
     width: 20%;
     background-color: transparent;
     border: none;
     border-bottom: 3px solid #222222;
 }
 
 #row input:focus {
     outline: none;
 }
 
 #row input:nth-last-child(2) {
     width: 45%;
 }
 
 .Interested {
     /* Define your default styling */
     background-color: #E9E9E9;
     color: #222222;
     /* Add other styles as needed */
 }
 
 .Interested.active {
     /* Define the styling when the button is active/toggled */
     background-color: #EFC71D !important;
     color: #222222;
     /* Add other styles as needed */
 }
 
 .buttonWidth {
     width: 100%;
     text-align: center;
 }
 
 button {
     margin-left: 80px;
     
     padding: 14px 40px 14px 40px;
     background-color: #222222;
     color: #fff;
     text-decoration: none;
     font-family: var(--sora);
     font-size: 1.2vw;
     display: flex;
     align-items: center;
     margin: auto;
     justify-content: center;
     font-weight: 500;
     border: none;
     transition: all 0.2s ease-in;
 }
 
 button:hover {
     background-color: #EFC71D;
 }
 
 footer {
     padding: 60px 40px;
     width: 100%;
     height: 15%;
     background-color: #222222;
 }
 
 #footer-in {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 #footer-in h5 {
     color: #fff;
     font-size: 1.5vw;
     font-weight: 400;
     font-family: var(--sora);
 }
 
 #footer-in img {
     max-width: 26px;
 }
 
 .clicked {
     background-color: lightblue;
 }
 /* @media */
 
 @media only screen and (min-width:666px) and (max-width:3000px) {
     #link-tree2 {
         display: none;
     }
     #contactform1 {
         display: none;
     }
 }
 
 @media only screen and (min-width:100px) and (max-width:666px) {
     #link-tree1 {
         display: none !important;
     }
     #contactform {
         display: none !important;
     }
 }
 
 @media only screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
     /* Your CSS styles for iPad Pro 11-inch in portrait mode go here */
     #navtitle img {
         width: 15px;
     }
     #navtitle h1 {
         font-size: 4vw;
     }
     #link-tree {
         display: none;
     }
     #hidden-div {
         display: none;
     }
     #header {
         justify-content: center;
     }
     #heroContent {
         top: 42%;
         width: 75%;
     }
     #content i {
         font-size: 70px;
     }
     #heroContent #content h1 {
         font-size: 35px;
     }
     #rect {
         top: 120%;
         width: stretch;
     }
     #scroller {
         position: relative;
         top: 2%;
     }
     #contact h1 {
         font-size: 4.5vw;
         font-weight: 500;
     }
     #contactform #row {
         margin-bottom: 20px;
     }
     #contactform #row h2 {
         font-size: 2.5vw;
     }
     #contactform #row h4 {
         font-weight: 600;
         padding: 15px 20px;
     }
     #contactform {
         width: 100%;
     }
     button {
         font-size: 2.5vw;
         margin-top: 30px;
     }
     #link-tree1 {
         display: flex;
         align-items: center;
         justify-content: center;
     }
     #link-tree1 a {
         font-size: 2vw;
         padding: 15px 10px 13px 19px;
         height: 52px;
     }
     #link-tree1 img {
         width: 15.01px;
         height: 8.5px;
         object-fit: cover;
     }
     #contact {
         height: 45vh;
     }
     #footer-in h5 {
         font-size: 3.2vw;
     }
 }
 
 @media only screen and (max-width: 1024px) {
    #rect{
        top: 134%;
    }
 }
 @media only screen and (min-width: 834px) {
     /* Your CSS styles for desktop go here */
     #link-tree1 {
         display: none;
     }
 }
 
 @media only screen and (max-width: 834px) {
     /* Your CSS styles for desktop go here */
     #navtitle img {
         width: 15px;
     }
     
     #navtitle h1 {
         font-size: 4vw;
     }
     #link-tree {
         display: none;
     }
     #hidden-div {
         display: none;
     }
     #header {
         justify-content: center;
     }

     #bg{
        height: 76vh;
     }
     #bg img{
        height: 84vh;
     }
     #heroContent {
         top: 35%;
     }
     #content{
        margin-bottom: 8%;
     }
     #content i {
         font-size: 66px;
     }
     #heroContent #content h1 {
         font-size: 34px;
     }
     #rect {
         top: 120%;
         width: 62%;
     }
     #scroller {
         position: relative;
         top: 4%;
     }
     #contact h1 {
         font-size: 4.5vw;
         font-weight: 500;
     }
     #contactform #row {
         margin-bottom: 20px;
     }
     #contactform #row h2 {
         font-size: 2.5vw;
     }
     #contactform #row h4 {
         font-weight: 600;
         padding: 15px 20px;
     }
     #contactform {
         width: 100%;
     }
     button {
         font-size: 2.5vw;
         margin-top: 30px;
         margin-left: 0;
     }
     #link-tree1 {
         display: flex;
         align-items: center;
         justify-content: center;
     }
     #link-tree1 a {
         font-size: 2vw;
         padding: 15px 10px 13px 19px;
         
         height: 52px;
     }
      #link-tree1 img {
     width: 20px;
     height: auto;
     object-fit: cover;
 }
     
     #contact {
         height: fit-content;
     }
     #footer-in h5 {
         font-size: 3.2vw;
     }
 }
 
 @media only screen and (min-width:445px) and (max-width:666px) {
     #link-tree2 {
         display: block;
         width: 100%;
         height: 100px;
     }
     #link-tree2 a {
         text-align: center;
         padding: 42px 10px 37px 10px;
         height: 100%;
         width: 100%;
         font-weight: 400;
     }
     #navtitle {
         margin-top: 30px;
     }
     #link-tree2 a img {
         width: 25px;
     }
     #header {
         height: auto;
         padding: 0;
         flex-direction: column;
     }
     #navtitle h1 {
         font-size: 6.8vw !important;
         font-weight: 900;
     }
     #hero{
        height: 80vh;
     }
     #bg{
        height: 100%;
     }
     #bg img{
        height: 100%;
     }
     #content i {
         font-weight: 700;
         font-size: 40px !important;
     }
     #content h1 {
         font-size: 22px !important;
     }
     #content {
         padding: 5px;
     }
     #heroContent {
         width: 100% !important;
         top: 50%;
     }

     #content h1 span {
         border-bottom: 7px solid #222222;
     }
     #rect {
         top: 115% !important;
         width: stretch !important;
     }
     #contact h1 {
         text-align: center;
         font-size: 6vw;
         font-weight: 900;
     }
     #heroContent #content h3{
        font-size: 20px;
     }
     #contact {
         height: fit-content;
         padding: 80px 20px;
     }
     #contactform1 {
         margin-top: 60px;
         width: 100%;
         height: 100%;
     }
     #contactform1 #row {
         /* background-color: red; */
         width: 100%;
         height: 40px;
         display: flex;
         align-items: center;
     }
     #contactform1 #row h2 {
         font-size: 6vw;
         font-family: var(--sora);
         font-weight: 500;
     }
     #contactform1 #row h4 {
         cursor: pointer;
         margin-left: 20px;
         /* width: 200px; */
         text-align: center;
         border-radius: 100px;
         font-size: 1.5vw;
         font-family: var(--sora);
         font-weight: 300;
         transition: all 0.2s linear;
     }
     .mobilecontact {
         width: 100%;
         display: flex;
         justify-content: unset;
         flex-wrap: wrap;
     }
     .mobilecontact input {
         font-size: 5vw !important;
     }
     #scroller h4 {
         font-size: 7vw;
     }
     #footer-in img {
         max-width: 20px;
     }
 }

 @media only screen and (min-width:325px) and (max-width:445px) {
     #link-tree2 {
         display: block;
         width: 100%;
         height: 100px;
     }

     #link-tree2 a {
         text-align: center;
         padding: 42px 10px 37px 10px;
         height: 100%;
         width: 100%;
         font-weight: 400;
     }

     #navtitle {
         margin-top: 30px;
     }

     #link-tree2 a img {
         width: 25px;
     }

     #header {
         height: auto;
         padding: 0;
         flex-direction: column;
     }
     #navtitle h1 {
         font-size: 6.8vw !important;
         font-weight: 900;
     }
     #hero{
        height: 100vh;
     }
     #bg{
        height: 100%;
     }
     #bg img{
        height: 100%;
     }
     #content i {
         font-weight: 700;
         font-size: 34px !important;
     }
     #content h1 {
         font-size: 18px !important;
     }
     #content {
         padding: 5px;
     }
     #heroContent {
         width: 100% !important;
         top: 44%;
     }

     #content h1 span {
         border-bottom: 7px solid #222222;
     }
     #rect {
         top: 128% !important;
         height: 60px;
         width: stretch;
     }
     #contact h1 {
         text-align: center;
         font-size: 30px;
         font-weight: 900;
     }
     #heroContent #content h3{
        font-size: 20px;
     }
     #contact {
         height: fit-content;
         padding: 44px 20px;
     }

     #scroller{
        top: -16%;
     }
     #contactform1 {
         margin-top: 60px;
         width: 100%;
     }
     #contactform1 #row {
         /* background-color: red; */
         width: 100%;
         height: 40px;
         display: flex;
         align-items: center;
     }
     #contactform1 #row h2 {
         font-size: 6vw;
         font-family: var(--sora);
         font-weight: 500;
     }
     #contactform1 #row h4 {
         cursor: pointer;
         margin-left: 20px;
         /* width: 200px; */
         text-align: center;
         border-radius: 100px;
         font-size: 1.5vw;
         font-family: var(--sora);
         font-weight: 300;
         transition: all 0.2s linear;
     }
     .mobilecontact {
         width: 100%;
         display: flex;
         justify-content: unset;
         flex-wrap: wrap;
     }
     .mobilecontact input {
         font-size: 5vw !important;
     }
     #scroller h4 {
         font-size: 7vw;
     }
     #footer-in img {
         max-width: 20px;
     }
 }