 :root {
            --link-color:  #6E057D;
            --link-color1:  #E67AD1; 
			--hero-color-1:#A11D9C;
			--hero-color-2: #F0E1C2;
            --menu-color1: #2c3e50;
            --menu-color2: #3498db;
            --primary-color: #851583;
            --secondary-color: #FFDFD3;
            --accent-color: #e74c3c;
            --light-gray: #ecf0f1;
            --white: #ffffff; 
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #2c3e50;
            --gray: #95a5a6;
            --white: #ffffff;
            --black: #333333;
        }
		
	
		
		 
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Open Sans', sans-serif;
            line-height: 1.6;
            color: #555;
          
            overflow-x: hidden;
			padding-top: 80px;
        }
        
        h1, h2, h3, h4 {
            font-family: 'Poppins', sans-serif;
            color: var(--dark);
            margin-bottom: 1rem;
            line-height: 1.3;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .btn {
            display: inline-block;
            padding: 14px 32px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            font-size: 1rem;
            box-shadow: var(--shadow);
        }
        
        .btn:hover {
            background: #3a56d4;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
        }
        
        .btn-secondary {
            background: var(--link-color);
        }
        
        .btn-secondary:hover {
            background: #e01a6f;
            box-shadow: 0 8px 20px rgba(247, 37, 133, 0.3);
        }
        
        section {
            padding: 5rem 0;
        }
        
        .text-center {
            text-align: center;
        }
       
       .header-container {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px 5%;
           background-color: var(--white);
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
           position: fixed;
           width: 90%;
           top: 0;
           z-index: 1000;
       }
       
       .logo a {
           font-family: 'Montserrat', sans-serif;
           font-size: 1.8rem;
           font-weight: 700;
           color: var(--primary-color);
           text-decoration: none;
		   
       }
       
       .partner-logos {
           display: flex;
           align-items: center;
           gap: 20px;
       }
       
       .partner-logos img {
           height: 50px;
           transition: transform 0.3s ease;
       }
       
       .partner-logos img:hover {
           transform: scale(1.05);
       }
       
       .nav-menu {
           display: flex;
           list-style: none;
       }
       
       .nav-item {
           position: relative;
		   padding-top: 20px; 
           margin: 5px;
       }
       
       .nav-link {
           font-weight: 500;
           color: var(--link-color);
           text-decoration: none;
           padding: 10px 0;
           position: relative;
           transition: color 0.3s ease;
       }
       
       .nav-link:hover, .nav-link.active {
           color: var(--link-color1);
       }
       
       .nav-link::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 0;
           height: 3px;
           background-color: var(--link-color);
           transition: width 0.3s ease;
       }
       
       .nav-link:hover::after, .nav-link.active::after {
           width: 100%;
       }
       
       .dropdown-menu {
           position: absolute;
           top: 100%;
           left: 0;
           background-color: var(--white);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
           border-radius: 5px;
           padding: 15px 0;
           min-width: 200px;
           opacity: 0;
           visibility: hidden;
           transition: all 0.3s ease;
           z-index: 1001;
       }
       
       .dropdown:hover .dropdown-menu {
           opacity: 1;
           visibility: visible;
       }
       
       .dropdown-item {
           padding: 8px 20px;
       }
       
       .dropdown-item a {
           color: var(--primary-color);
           text-decoration: none;
           transition: color 0.3s ease;
           display: block;
       }
       
       .dropdown-item a:hover {
           color: var(--secondary-color);
           padding-left: 5px;
       }
       
       .btn-apply {
           background-color: var(--secondary-color);
           color: var(--white);
           padding: 10px 20px;
           border-radius: 5px;
           transition: all 0.3s ease;
       }
       
       .btn-apply:hover {
           background-color: #2980b9;
           transform: translateY(-2px);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       }
       
       .mobile-menu-btn {
           display: none;
           font-size: 1.5rem;
           cursor: pointer;
       }
	   
	    /* register iframe styles */ 
		
		 .subtitle {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 10px;
        }
        
        .form-container {
          
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 30px;
			max-width: 800px;
			margin: 30px auto;
			background: white;
			padding: 30px;
 
}

     
        
           .form-frame-container {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
        }
        
        .form-frame {
            width: 750px;
            height: 2250px;
            border: none;
            display: block;
        }

   
        
  
        
        @media (max-width: 768px) {
            .logo h1 {
                font-size: 1.8rem;
            }
            
            .subtitle {
                font-size: 1rem;
            }
            
            .form-header h2 {
                font-size: 1.5rem;
            }
            
            .form-header p {
                font-size: 1rem;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
            
          
            
            .form-frame {
                height: 2400px; /* Slightly taller for mobile to prevent clipping */
            }
        }
        
        @media (max-width: 480px) {
            .logo {
                flex-direction: column;
                gap: 10px;
            }
            
            .logo i {
                margin-right: 0;
            }
            
            .form-header {
                padding: 15px;
            }
            
          
            
        
            
            .form-frame {
                height: 2500px; /* Even taller for very small screens */
            }
        }
		 /* Loading indicator */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            font-size: 1.2rem;
            color: #6E057D;
        }
        
        .loading i {
            margin-right: 10px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
		
		
		
		
	   
	  /* Course Conditions Styles */
        .conditions-section {
            padding: 2rem 0;
            background-color: var(--white);
        }

        .section-title {
            position: relative;
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .section-title h2 {
            font-size: 2rem;
            display: inline-block;
            position: relative;
            padding-bottom: 10px;
            color: #851583;
        }
        
        .section-title h2:after {
            
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

	
	
        .info-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 5px solid var(--primary-color);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .info-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
			
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: var(--primary-color);
        }

        .card-header i {
            font-size: 2rem;
            margin-right: 15px;
            background: #f5e6f9;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .info-card h3 {
            font-size: 1.8rem;
            color: var(--primary-color);
        }

        ul {
            padding-left: 25px;
            margin-bottom: 20px;
        }

        li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 15px;
        }

        li:before {
            
            color: var(--primary-color);
            
            position: absolute;
            left: 0;
            top: 0;
        }

        .highlight {
            background: #f5e6f9;
            padding: 3px 8px;
            border-radius: 5px;
            font-weight: 600;
        }

        .email-link {
            color: var(--link-color);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s;
        }

        .email-link:hover {
            color: var(--link-color1);
            text-decoration: underline;
        }

        .payment-info {
            background: linear-gradient(to right, #f5e6f9, #e9d0f1);
            border-radius: 12px;
            padding: 30px;
            margin-top: 30px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        .payment-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .payment-header i {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-right: 20px;
        }

        .important-note {
            background: #fff8e1;
            border-left: 5px solid #ffc107;
            padding: 20px;
            margin: 25px 0;
            border-radius: 0 8px 8px 0;
        }

        .external-link {
            color: var(--link-color);
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
        }

        .external-link:hover {
            color: var(--link-color1);
            text-decoration: underline;
        }

        .external-link i {
            margin-left: 5px;
            font-size: 0.8em;
        }  
	   
	   
	   
	   
	   
	   
       
       /* Responsive Styles */
       @media (max-width: 992px) {
           .header-container {
               padding: 15px 3%;
           }
           
           .nav-menu {
               position: fixed;
               top: 80px;
               left: -100%;
               width: 80%;
               height: calc(100vh - 80px);
               background-color: var(--white);
               flex-direction: column;
               align-items: center;
               padding: 40px 0;
               transition: all 0.5s ease;
               box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
           }
           
           .nav-menu.active {
               left: 0;
           }
           
           .nav-item {
               margin: 15px 0;
           }
           
           .dropdown-menu {
               position: static;
               opacity: 1;
               visibility: visible;
               box-shadow: none;
               display: none;
           }
           
           .dropdown:hover .dropdown-menu {
               display: block;
           }
           
           .mobile-menu-btn {
               display: block;
           }
           
           .partner-logos {
               display: none;
           }
       }
	 
	


	
 /* Hero Section Styles */
       .hero {
           padding: 180px 0 100px;
           text-align: center;
           color: white;
           background: linear-gradient(135deg, var(--hero-color-1), var(--hero-color-2),);
           position: relative;
           overflow: hidden;
       }
       
       .hero::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.3);
           z-index: 1;
       }
       
       .hero-container {
           position: relative;
           z-index: 2;
           max-width: 1200px;
           margin:  0 auto;
		   margin-top:  0px;
           padding: 20px 0 20px;
		   text-align: center;		 
		   
            
 
}
      
	   
	   
       
       .hero h1 {
           font-size: 3rem;
           margin-bottom: 20px;
           animation: fadeInUp 1s ease;
       }
       
       .hero p {
           font-size: 1.2rem;
           max-width: 700px;
           margin: 0 auto 30px;
           animation: fadeInUp 1s ease 0.2s forwards;
           opacity: 0;
       }
       
       .hero-buttons {
           display: flex;
           justify-content: center;
           gap: 20px;
           animation: fadeInUp 1s ease 0.4s forwards;
           opacity: 0;
       }
       
       .btn {
           padding: 12px 25px;
           border-radius: 5px;
           font-weight: 600;
           text-decoration: none;
           transition: all 0.3s ease;
		 
		   		
       }
       
       .btn-primary {
           background-color: var(--btn-primary);
           color: white;
		   
       }
       
       .btn-primary:hover {
           background-color: var(--btn-primary-hover);
           transform: translateY(-3px);
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		
       }
       
       .btn-secondary {
           background-color: transparent;
           color: white;
           border: 2px solid white;
		
       }
       
       .btn-secondary:hover {
           background-color: white;
           color: var(--hero-color-1);
           transform: translateY(-3px);
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		  
       }
       
       @keyframes fadeInUp {
           from {
               opacity: 0;
               transform: translateY(20px);
           }
           to {
               opacity: 1;
               transform: translateY(0);
           }
       }
       
     
	   
	   
	   	.info-cart {
            background: var(--primary-color);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 5px solid var(--primary-color);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
		 .info-cart:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
		
		
       
       /* Apply page */
       body.register .hero {
          --hero-color-1:#A11D9C;
           --hero-color-2: #F0E1C2;
           --btn-primary: #3498db;
           --btn-primary-hover: #2980b9;
       }
	    
       /* index page */
       body.index .hero {
          --hero-color-1:#A11D9C;
           --hero-color-2: #F0E1C2;
           --btn-primary: #3498db;
           --btn-primary-hover: #2980b9;
       }
	   
	   
	   
	   
	    /* konverzaced page */
       body.konverzaced .hero {
           ---hero-color-1:#9b59b6;
           --hero-color-2: #8e44ad;
           --btn-primary: #3498db;
           --btn-primary-hover: #2980b9;
       }
	    
	      /* PET page */
       body.PET .hero {
          --hero-color-1:#A11D9C;
           --hero-color-2: #F0E1C2;
           --btn-primary: #3498db;
           --btn-primary-hover: #2980b9;
       }
	   
	   
	      
	      /* Movers page */
       body.Movers .hero {
          --hero-color-1:#A11D9C;
           --hero-color-2: #F0E1C2;
           --btn-primary: #3498db;
           --btn-primary-hover: #2980b9;
       }
	   
	   
	   
	      /* indivcourse page */
       body.indivcourse .hero {
          --hero-color-1:#A11D9C;
           --hero-color-2: #F0E1C2;
           --btn-primary: #3498db;
           --btn-primary-hover: #2980b9;
       }
	   
	   /* conversation page */
       body.conversation .hero {
          --hero-color-1:#A11D9C;
           --hero-color-2: #F0E1C2;
           --btn-primary: #3498db;
           --btn-primary-hover: #2980b9;
       }  
 

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

#msg_body {
 font-family: 'Open Sans', sans-serif;
 line-height: 1.6;
 color: var(--black);
}

h1, h2, h3, h4 {
 font-family: 'Montserrat', sans-serif;
 font-weight: 700;
 color: var(--dark);
}

a {
 text-decoration: none;
 color: var(--secondary);
 transition: all 0.3s ease;
}

a:hover {
 color: var(--accent);
}

img {
 max-width: 100%;
 height: auto;
}

.container {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 15px;
}

.btn {
 display: inline-block;
 padding: 12px 24px;
 border-radius: 4px;
 font-weight: 600;
 text-align: center;
 transition: all 0.3s ease;
}

.btn-primary {
 background-color:#6E057D;
 color: var(--white);

}

.btn-primary:hover {
 background-color:  #E67AD1;
 color: var(--white);

}

.btn-secondary {
 background-color: transparent;
 color: var(--secondary);
 border: 2px solid var(--secondary);

}

.btn-secondary:hover {
 background-color: var(--secondary);
 color: var(--white);
 
}

.btn-small {
 padding: 8px 16px;
 font-size: 0.9rem;
}

.text-center {
 text-align: center;
}

/* Header Styles */
header {
 background-color: var(--white);
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 position: fixed;
 width: 100%;
 top: 0;
 z-index: 1000;
 padding: 15px 0;
}

header .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 
}

.logo a {
 font-family: 'Montserrat', sans-serif;
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--primary-color);
}

nav ul {
 display: flex;
 list-style: none;
}

nav ul li {
 margin-left: 30px;
 position: relative;
}

nav ul li a {
 font-weight: 600;
 color: var(--dark);
}

nav ul li a.active {
 color: var(--secondary);
}

nav ul li a:hover {
 color: var(--secondary);
}

.dropdown-menu {
 position: absolute;
 top: 100%;
 left: 0;
 background-color: var(--white);
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 border-radius: 4px;
 padding: 10px 0;
 min-width: 200px;
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s ease;
}

.dropdown:hover .dropdown-menu {
 opacity: 1;
 visibility: visible;
}

.dropdown-menu li {
 margin: 0;
 padding: 5px 15px;
}

.dropdown-menu li a {
 display: block;
 padding: 8px 0;
 color: var(--dark);
}

.dropdown-menu li a:hover {
 color: var(--secondary);
}

.mobile-menu {
 display: none;
 font-size: 1.5rem;
 cursor: pointer;
}

/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--hero-color-1), var(--hero-color-2),url('images/logo1.jpg'),);
 background-size: cover;
 background-position: center;
 color: var(--white);
 padding: 100px 0 60px;
 text-align: center;
}

.hero h1 {
 font-size: 3rem;
 margin-bottom: 20px;
 color: var(--white);
}

.hero p {
 font-size: 1.2rem;
 margin-bottom: 30px;
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
}

.hero-buttons {
 display: flex;
 justify-content: center;
 gap: 20px;
}

/* Featured Courses */
.featured-courses {
 padding: 80px 0;
}

.featured-courses h2 {
 text-align: center;
 margin-bottom: 50px;
 font-size: 2.2rem;
}

.course-grid1 {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 30px;
 margin-bottom: 40px;
}

.course-card1 {
 background-color:white-space;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease;
 width= 250px;
 
 
}

.course-card1:hover {
 transform: translateY(-10px);
}
.course-info1 {
 padding: 70px;
}

.course-info1 h3 {
 margin-bottom: 10px;
 font-size: 1.3rem;
}

.course-info1 p {
 color: var(--gray);
 margin-bottom: 15px;
 text-align:center;
}





.course-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 30px;
 margin-bottom: 40px;
}

.course-card {
 background-color: var(--white);
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease;
}

.course-card:hover {
 transform: translateY(-10px);
}

.course-card img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}

.course-info {
 padding: 20px;
}

.course-info h3 {
 margin-bottom: 10px;
 font-size: 1.3rem;
}

.course-info p {
 color: var(--gray);
 margin-bottom: 15px;
}

.course-meta {
 display: flex;
 justify-content: space-between;
 margin-bottom: 15px;
 color: var(--gray);
 font-size: 0.9rem;
}

/* Why Choose Us */


        .why-choose-us {
            background-color: var(--light);
            position: relative;
            overflow: hidden;
        }
        
        .section-title {
            position: relative;
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .section-title h2 {
            font-size: 2.4rem;
            display: inline-block;
            position: relative;
            padding-bottom: 10px;
			color:#851583;
        }
        
        .section-title h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 2rem;
        }
        
        .feature {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 25px;
            text-align: center;
            transition: var(--transition);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .feature:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            transition: var(--transition);
            z-index: -1;
            opacity: 0;
        }
		
        
        .feature:hover {
            transform: translateY(-10px);
            color: white;
        }
        
        .feature:hover:before {
            height: 100%;
            opacity: 1;
        }
        
        .feature:hover h3,
        .feature:hover p,
        .feature:hover .feature-icon {
            color: white;
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            transition: var(--transition);
        }
        
        .feature h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            transition: var(--transition);
        }
        
        .feature p {
            transition: var(--transition);
        }
        
		
	




   .feature {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 25px;
            text-align: center;
            transition: var(--transition);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .feature:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            transition: var(--transition);
            z-index: -1;
            opacity: 0;
        }
		
        
        .feature:hover {
            transform: translateY(-10px);
            color: white;
        }
        
        .feature:hover:before {
            height: 100%;
            opacity: 1;
        }
        
        .feature:hover h3,
        .feature:hover p,
        .feature:hover .feature-icon {
            color: white;
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            transition: var(--transition);
        }
        
        .feature h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            transition: var(--transition);
        }
        
        .feature-courses p {
            transition: var(--transition);
        }
        


	
		
/* Testimonials */
.testimonials {
 padding: 80px 0;
 background-color: var(--white);
}

.testimonials h2 {
 text-align: center;
 margin-bottom: 50px;
 font-size: 2.2rem;
}

.testimonial-slider {
 position: relative;
 max-width: 800px;
 margin: 0 auto;
}

.testimonial {
 display: none;
 text-align: center;
}

.testimonial.active {
 display: block;
 animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

.testimonial blockquote {
 font-size: 1.2rem;
 font-style: italic;
 color: var(--dark);
 margin-bottom: 30px;
 position: relative;
}

.testimonial blockquote::before,
.testimonial blockquote::after {
 content: '"';
 font-size: 3rem;
 color: var(--secondary);
 opacity: 0.3;
 position: absolute;
}

.testimonial blockquote::before {
 top: -20px;
 left: -30px;
}

.testimonial blockquote::after {
 bottom: -40px;
 right: -30px;
}

.author {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 15px;
}

.author img {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 object-fit: cover;
}

.author p span {
 display: block;
 font-size: 0.9rem;
 color: var(--gray);
 margin-top: 5px;
}

.slider-controls {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
 margin-top: 30px;
}

.slider-controls button {
 background: none;
 border: none;
 font-size: 1.2rem;
 color: var(--secondary);
 cursor: pointer;
 transition: all 0.3s ease;
}

.slider-controls button:hover {
 color: var(--accent);
}

.dots {
 display: flex;
 gap: 10px;
}

.dot {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: var(--gray);
 cursor: pointer;
 transition: all 0.3s ease;
}

.dot.active {
 background-color: var(--secondary);
}

/* Call to Action */
.cta {
 background: linear-gradient(135deg, var(--hero-color-1), var(--hero-color-2),url('images/logo1.jpg'),);
 background-size: cover;
 background-position: center;
 color: var(--link-color);
 padding: 80px 0;
 text-align: center;
}

.cta h2 {
 font-size: 2.2rem;
 margin-bottom: 20px;
 color: var(--link-color);
}

.cta p {
 font-size: 1.2rem;
 margin-bottom: 30px;
}

.cta p strong {
 color: var(--link-color);
}

.cta-buttons {
 display: flex;
 color: var(--link-color);
 justify-content: center;
 gap: 20px;
}


/* Counter*/

     .counter {
            background-color: var(--light);
            position: relative;
            overflow: hidden;
        }
        
        .section-title {
            position: relative;
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .section-title h2 {
            font-size: 2.4rem;
            display: inline-block;
            position: relative;
            padding-bottom: 10px;
			color:#851583;
        }
        
        .section-title h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }



 .stats-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 30px 20px;
            gap: 25px;
        }
        
        .stat-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            width: 280px;
            padding: 30px;
            text-align: center;
            transition: transform 0.3s ease;
            border-top: 5px solid #1a2980;
        }
        
        .stat-card:hover {
            transform: translateY(-10px);
        }
        
        .stat-card:nth-child(2) {
            border-top-color: #FF9800;
        }
        
        .stat-card:nth-child(3) {
            border-top-color: #4CAF50;
        }
        
        .stat-card i {
            font-size: 3.5rem;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #1a2980, #26d0ce);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .stat-card:nth-child(2) i {
            background: linear-gradient(135deg, #FF9800, #FF5722);
            -webkit-background-clip: text;
        }
        
        .stat-card:nth-child(3) i {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            -webkit-background-clip: text;
        }
        
        .stat-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #1a2980;
        }
        
        .stat-card:nth-child(2) .stat-title {
            color: #FF9800;
        }
        
        .stat-card:nth-child(3) .stat-title {
            color: #4CAF50;
        }
        
        .counter {
            font-size: 4rem;
            font-weight: 700;
            margin: 20px 0;
            color: #1a2980;
        }
        
        .stat-card:nth-child(2) .counter {
            color: #FF9800;
        }
        
        .stat-card:nth-child(3) .counter {
            color: #4CAF50;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }
        
        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn-increment {
            background: linear-gradient(135deg, #1a2980, #26d0ce);
            color: white;
            flex: 1;
            justify-content: center;
        }
        
        .btn-decrement {
            background: linear-gradient(135deg, #ff416c, #ff4b2b);
            color: white;
            width: 45px;
            height: 45px;
            justify-content: center;
            padding: 0;
        }
        
        .summary-section {
            background: #f8f9fa;
            padding: 40px;
            border-top: 1px solid #eaeaea;
            text-align: center;
        }
        
        .summary-title {
            font-size: 1.8rem;
            color: #1a2980;
            margin-bottom: 30px;
        }
        
        .summary-stats {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 20px;
        }
        
        .summary-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            min-width: 220px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .summary-card h3 {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: #666;
        }
        
        .summary-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1a2980;
        }
        
        .summary-card:nth-child(2) .summary-value {
            color: #FF9800;
        }
        
        .summary-card:nth-child(3) .summary-value {
            color: #4CAF50;
        }
        
        .reset-section {
            padding: 30px;
            text-align: center;
            background: #f8f9fa;
            border-top: 1px solid #eaeaea;
        }
        
        .btn-reset {
            background: linear-gradient(135deg, #ff416c, #ff4b2b);
            color: white;
            padding: 15px 40px;
            font-size: 1.1rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn-reset:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 75, 43, 0.4);
        }
        
        .btn-reset:active {
            transform: translateY(1px);
        }
        
      








/* Footer #6E057D;*/
footer {
	
 background:linear-gradient(135deg, #6E057D ,#C49480);
 color: var(--white);
 padding: 60px 0 20px;
}

.footer-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
 gap: 10px;
 margin-bottom: 40px;
}

.footer-col h3 {
 color: var(--white);
 margin-bottom: 30px;
 font-size: 1.1rem;
}

.footer-col p, .footer-col li {
 margin-bottom: 10px;
 color: var(--light);
 font-size: 0.8rem;
}

.footer-col ul {
 list-style: none;
}

.footer-col ul li a {
 color: var(--light);
}

.footer-col ul li a:hover {
 color: var(--secondary);
}

.social-links {
 display: flex;
 gap: 15px;
 margin-bottom: 20px;
}

.social-links a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.1);
 color: var(--white);
 transition: all 0.3s ease;
}

.social-links a:hover {
 background-color: var(--secondary);
 color: var(--white);
}

.newsletter input {
 width: 100%;
 padding: 10px;
 border: none;
 border-radius: 4px;
 margin-bottom: 10px;
}

.newsletter button {
 background-color: var(--secondary);
 color: var(--white);
 border: none;
 border-radius: 4px;
 padding: 10px 15px;
 cursor: pointer;
}

.newsletter button:hover {
 background-color: #2980b9;
}

.copyright {
 text-align: center;
 padding-top: 20px;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 color: var(--white);
 font-size: 0.8rem;
}

/* Responsive Styles */




@media (max-width: 992px) {
 .hero h1 {
   font-size: 2.5rem;
 }
 
 .hero-buttons, .cta-buttons {
   flex-direction: column;
   gap: 15px;
 }
 
 .hero-buttons a, .cta-buttons a {
   width: 100%;
 }
}

@media (max-width: 768px) {
 nav {
   position: fixed;
   top: 80px;
   left: -100%;
   width: 80%;
   height: calc(100vh - 80px);
   background-color: var(--white);
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }
 
 nav.active {
   left: 0;
 }
 
 nav ul {
   flex-direction: column;
   padding: 20px;
 }
 
 nav ul li {
   margin: 0 0 15px 0;
 }
 
 .dropdown-menu {
   position: static;
   opacity: 1;
   visibility: visible;
   box-shadow: none;
   padding: 10px 0 0 20px;
 }
 
 .mobile-menu {
   display: block;
 }
 
 .hero {
   padding: 150px 0 80px;
 }
 
 .hero h1 {
   font-size: 2rem;
 }
 
 .hero p {
   font-size: 1rem;
 }
 
 .testimonial blockquote {
   font-size: 1rem;
 }
}

@media (max-width: 576px) {
 .container {
   width: 95%;
 }
 
 .course-grid {
   grid-template-columns: 1fr;
 }
 
 .features {
   grid-template-columns: 1fr;
 }
 
 .testimonial blockquote::before,
 .testimonial blockquote::after {
   display: none;
 }
}
 /* JavaScript for mobile menu */
 .nav-menu.active {
   display: flex;
 }
